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积累 “工作 经 验 ”。 

合理 安排 实 训 : 提高 学 生 自 主 解决 实际 问题 的 能 力 ,有 要 求 ,有 指 
导 , 方 便 教师 对 学 习 内 容 的 安排 。 

习题 : 每 一 章 末尾 都 包含 了 习题 ,便于 巩固 该 章 学 习 的 内 容 , 引 导 学 
生 提 高 上 机 操作 能 力 。 
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com. cn/ 。 
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第 1 章 网 页 制作 基础 


口 认识 网 页 与 网 站 。 

口 了 解 网 页 设计 的 主题 与 风格 定位 。 

口 掌握 网 页 设计 与 制作 的 基本 流程 。 

口 掌 握 与 网 页 制作 相关 的 专业 术语 。 

随 着 互联 网 Web 2. 0 时 代 的 到 来 , 越 来 越 多 的 个 人 和 企业 用 户 希 望 通过 网 络 发 布 自 
己 的 信息 ,而 作为 网 络 信息 的 有 效 载体 的 网 页 ,其 界面 布局 的 精美 程度 决定 着 用 户 体验 的 
好 坏 。 如 何 设计 并 制作 出 符合 Web 标准 的 精美 网 页 ,是 本 门 课程 所 要 解决 的 问题 。 本 章 
主要 对 网 页 与 网 站 的 基础 知识 进行 介绍 ,目的 是 让 读者 对 网 页 设计 与 制作 有 一 个 初步 了 
解 ,为 以 后 快速 掌握 网 页 设计 的 技巧 打下 坚实 基础 。 


11 认识 网 页 与 网 站 


界面 友好 的 网 页 不 仅仅 要 有 一 个 好 的 外 表 , 更 重要 的 是 它 还 要 将 信息 传达 给 用 户 。 
在 深入 学 习 网 页 设计 与 制作 之 前 需要 掌握 最 基本 的 知识 。 


1. 网 页 


网 页 (Webpage) 实 际 上 就 是 一 个 文件 , 它 存放 于 某 台 与 互联 网 相连 的 计算 机 中 , 它 是 
Internet 中 最 基本 的 信息 单位 。 在 网 页 中 ,通常 包含 文字 和 图 像 信息 ,有 些 网 页 还 包含 声 
音 、 视 频 和 动画 等 多 媒体 信息 。 


2. 网 站 


网 站 (Website) 是 由 各 种 特定 内 容 的 网 页 集合 而 成 的 ,人 们 可 以 通过 浏览 器 访问 网 站 
来 获取 相应 的 网 络 服务 。 就 目前 而 言 , 在 网 站 建设 中 一 般 会 包含 这 几 种 网 站 类 型 : 门户 型 、 
企业 型 SNS 型 . 音 视频 型 和 搜索 型 。 不 同 的 网 站 类 型 一 般 针 对 各 自 的 特点 有 独特 的 设计 。 

(1) 门户 型 网 站 

门户 型 网 站 的 信息 量 很 大 ,一般 首页 都 能 够 达到 4 屏 以 上 ,浏览 性 的 信息 占据 了 页 面 
中 心 的 位 置 ,特别 是 首页 ,在 醒目 的 位 置 还 添加 了 网 站 导航 广告 以 及 各 种 精 选 信息 ,代表 
性 网 站 如 图 1-1 所 示 。 

(2) 企业 型 网 站 

企业 型 网 站 属于 专业 型 网 站 ,内 容 方面 一 般 包含 企业 介绍 、 产 品 介 绍 、 新 闻 动态 等 基 
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图 1-1 门户 型 网 站 (新 浪 网 ) 


本 信息 ,如 图 1-2 所 示 。 
和 安全 感 。 
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这 类 网 站 通常 以 成 熟 稳重 风格 出 现 , 能 够 让 浏览 
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图 1-2 企业 型 网 站 (国家 电网 ) 


者 感觉 到 信任 感 


(3) SNS 型 网 站 


SNS(Social Networking Services) 中 文 意思 是 社会 性 网 络 服务 , 专 指 则 在 帮助 人 们 于 
立 社会 化 网 络 的 互联 网 应 用 服务 。SNS 的 另 一 种 常用 解释 为 Social Network Site, 即 “ 社 
交 网 站 ”或 “社交 网 ”。 该 类 网 站 的 重点 并 非 突出 网 站 本 身 , 更 多 的 是 建立 一 个 网 上 人 际 关 
系 的 平台 ,如 图 1-3 所 示 。 
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1-3 SNS 型 网 站 (人 人 网 ) 
(4) 音 视频 型 网 站 


音 视频 型 网 站 指 的 是 以 推荐 音乐 和 视频 为 主要 业务 的 网 站 ,例如 优酷 网 、 酷 6 网 、 爱 


奇 艺 和 迅雷 看 看 等 。 此 类 型 的 网 站 一 般 采 用 左右 纵览 结构 ,以 方便 罗列 各 种 音 视频 资源 ， 
如 图 1-4 所 示 。 
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图 1-4 音 视 频 型 网 站 ( 酷 6 网 ) 
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(5) 搜索 型 网 站 
搜索 型 网 站 是 专业 为 用 户 提供 搜索 服务 的 网 站 ,通常 页 面 设计 非常 简单 ,突出 强调 了 
用 户 的 体验 度 , 如 图 1-5 所 示 。 


°° 
Bai 人 百度 


新 闻 网 页 贴吧 知道 MP3 图 片 视频 地 图 


百度 一 下 


百科 文库 hao123 | 更 多 > 


把 百度 设 为 主页 把 百度 添加 到 桌面 
加 入 百度 推广 | 搜索 风云 榜 | 关于 百度 | About Baidu 


图 1-5 搜索 型 网 站 (百度 ) 
3. 首页 


首页 是 在 浏览 器 打开 某 个 网 站 后 首先 看 到 的 页 面 , 它 承 载 着 网 站 中 所 有 指向 二 级 页 面 
或 其 他 网 站 的 链接 信息 , 它 是 整个 网 站 中 最 为 特殊 的 页 面 ,具有 体现 整个 网 站 形象 的 作用 。 


4. 网 页 的 构成 元 素 


无 论 何 种 类 型 的 网 页 或 多 或 少 都 包含 以 下 基本 元 素 : 文本 、 图 像 , 视 频 、 音 频 、 超 链 
接 、 表 格 .表单 .导航 栏 和 动画 等 ,如 图 1-6 所 示 。 
导航 栏 一 zn 


Flash 动 画 
A 
EO annevanes | aa "snes 
四 你- 一 文本 
. C Au: 
超 链 接 


1-6 某 教育 机 构 网 站 主页 


MAR 
文本 可 以 理解 为 网 页 中 的 文字 内 容 , 它 是 网 页 设计 的 主体 ,具有 准确 表达 信息 的 功 
能 。 为 了 引起 浏览 者 的 注意 ,网 页 设计 人 员 通 过 设置 字体 、 字 号 和 颜色 等 文本 属性 ,突出 
显示 重要 内 容 。 
(2) 图 像 
网 页 中 的 图 像 主要 有 美化 网 页 、 定 位 风格 、 产 品 宣传 和 信息 传递 等 作用 ,JPEG、GIF 
和 PNG 等 图 像 格式 在 网 页 制作 中 经 常 出 现 。 此 外 ,图 像 一 般 被 应 用 在 以 下 三 个 方面 。 
。 Logo 图 像 : Logo 是 代表 企业 形象 或 栏目 内 容 的 标志 性 图 片 ,一 般 在 网 页 醒目 的 
位 置 上 ,如 页 面 左 上 角 。 
。 Banner 图 像 : Banner 是 用 于 宣传 网 站 内 某 个 栏目 或 活动 的 广告 ,一 般 要 求 制 作 
成 动画 形式 ,以 达到 宣传 的 效果 。Banner 一 般 位 于 网 页 的 顶部 和 底部 ,还 有 一 些 
小 型 的 广告 会 被 适当 地 放 在 网 页 的 两 侧 。 
。 背景 图 : 目前 很 多 网 站 将 所 需 的 背景 图 片 放 置 在 一 幅 图 像 上 ,利用 CSS 中 的 定位 
属性 快速 实现 图 像 的 定位 。 
(3) 超 链接 
超 链接 是 一 种 同 其 他 网 页 或 站 点 之 间 进 行 连接 的 元 素 。 在 网 页 中 超 链接 的 对 象 ,可 
以 是 文字 或 者 图 像 。 当 浏览 者 单 击 已 经 链接 的 文字 或 图 像 后 ,链接 目标 将 显示 在 浏览 
器 中 。 
(4) 表单 
表单 在 网 页 中 主要 负责 数据 采集 , 它 是 浏览 者 与 服务 器 之 间 进 行 信息 交互 的 元 素 ,使 
用 表单 可 以 完成 登录 .搜索 注册、 反馈 意 见 和 调查 等 互 交 功 能 。 
(5) 导航 栏 
导航 栏 就 是 一 组 超 链接 ,用 来 方便 地 浏览 站 点 。 导 航 栏 可 能 是 按钮 或 者 文本 超 链 接 。 
导航 栏 一 般 用 于 网 站 各 部 分 内 容 间 相互 链接 的 指引 。 
(6) 动画 
动画 是 网 页 上 最 活跃 的 元 素 , 网 页 中 的 动画 可 分 为 GIF 动画 和 Flash 动画 两 类 。 由 
于 Flash 本 身体 积 较 大 ,对 于 访问 量 非常 大 的 网 站 一 般 使 用 GIF 动画 代替 Flash 动画 ,但 
对 于 追求 效果 的 网 站 来 说 ,使 用 Flash 建设 网 站 还 是 非常 能 够 吸引 访问 者 的 。 
(7) 视频 
随 着 网 络 带宽 环境 的 改善 ,在 网 页 中 增加 视频 能 够 非常 直观 地 传递 信息 ,同时 也 使 得 
页 面 丰富 起 来 。 
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在 网 页 设计 与 制作 的 整个 过 程 中 ,始终 以 用 户 为 中 心 ,设计 者 通过 巧妙 的 版 面 设计 来 
传递 信息 ,因此 一 个 设计 者 不 仅仅 是 一 个 拥有 技术 和 创造 力 的 人 ,更 应 该 是 一 个 好 的 交 
流 者 。 
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1. 网 页 设计 


网 站 页 面 设计 简称 网 页 设计 , 它 指 的 是 网 页 的 视觉 设计 和 浏览 器 交互 功能 设计 ,属于 
艺术 设计 范畴 ; 网 站 设计 , 指 的 是 网 站 主题 的 策划 、 栏 目 内 容 的 编排 .网 站 结构 的 架设 等 
内 容 , 属 于 策划 设计 范畴 ; 网 站 系统 开发 包括 了 服务 器 交互 程序 设计 、 数 据 库 设计 等 内 
容 , 属 于 程序 设计 范畴 。 

总 的 来 说 ,网 页 设计 广义 上 就 是 网 站 设计 、 网 站 页 面 设计 、 网 站 系统 开发 的 统称 ,狭义 
上 就 是 指 网 站 页 面 设 计 。 


2. 网 页 制作 
网 页 制作 指 的 是 通过 Dreamweaver 等 软件 将 设计 师 所 设计 出 来 的 网 页 设计 稿 ,按照 
W3C 规范 用 HTML 或 XHTML 语言 将 其 制作 成 网 页 格式 的 过 程 。 


1.2.2 网 页 设计 的 主题 与 风格 定位 


1. 主题 定位 


所 谓 主题 指 的 是 网 站 所 要 表达 的 主要 内 容 即 网 站 的 题材 ,不 同 的 网 站 对 应 不 同 的 浏 
览 群 体 ,特定 的 浏览 群体 意味 着 有 特定 的 主题 内 容 。 为 此 ,在 动手 制作 网 站 之 前 一 定 要 考 
虑 这 个 网 站 到 底 要 做 什么 ,通过 这 个 网 站 要 表达 什么 内 容 , 要 给 网 站 一 个 准确 的 定位 ,如 
果 内 容 过 于 庞杂 ,就 会 失去 中 心 主 题 而 减 小 对 访问 者 的 吸引 力 。 
另外 ,网 站 的 主题 需要 通过 具体 的 功能 去 实现 ,系统 功能 是 建设 网 站 的 核心 。 对 于 网 
站 功能 方面 的 设计 要 考虑 服务 对 象 , 了 解 服务 对 象 的 喜好 与 习惯 ; 设计 功能 时 还 要 适应 
管理 对 象 ,因为 网 站 是 一 系列 管理 者 的 工作 平台 ,不 同 管理 者 的 职责 和 权限 是 不 同 的 ; 设 
计 功 能 时 还 要 善于 总 结 ,在 进行 需求 分 析 的 基础 上 ,按照 逻辑 结构 、 角 色 权 限 、 职 能 部 门 等 
内 在 因素 进行 有 效 合理 划分 ,以 便于 后 期 开发 。 
主题 定位 的 几 点 建议 。 
。 尽量 选择 擅长 的 题材 。 作 为 设计 师 来 讲 , 尽 量 选 择 自己 熟悉 、 擅 长 的 领域 来 作为 
网 站 的 主题 ,这 样 在 设计 制作 时 能 够 得 心 应 手 。 

。 主题 范围 要 小 而 精 。 网 站 主题 范围 不 应 太 宽 太 大 ,要 基于 某 一 亮点 做 出 特色 ,这 
样 才能 吸引 广大 浏览 者 的 眼球 。 

° 内 容 标新立异 。 可 以 借鉴 ,参考 他 人 网 站 的 主题 ,但 一 定 要 有 创新 。 


2. 风格 定位 


所 谓 风格 是 指 网 站 的 整体 内 容 与 形式 给 浏览 者 的 综合 感受 , 即 网 站 的 特色 。 风 格 能 
够 透露 出 设计 者 与 企业 文化 的 品位 ,从 浏览 者 接受 信息 的 角度 来 看 ,最 初 吸引 浏览 者 的 一 
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定 是 风格 特征 ,但 随 着 浏览 者 的 继续 使 用 ,会 逐渐 增加 对 内 容 以 及 浏览 过 程 的 体验 。 总 
之 ,有 价值 的 内 容 是 风格 的 基础 ,创意 是 风格 的 灵魂 。 风 格 定位 的 几 点 建议 。 
。 确保 页 面 元 素 的 统一 性 。 网 页 中 包含 的 图 像 , 文 字 、 导 航 背 景 等 基本 元 素 要 形成 
统一 的 整体 。 
。 确保 网 站 界面 的 清晰 .美观 .易于 访问 。 
。 结合 版 式 设计 的 相关 理论 ,合理 安排 视觉 要 素 , 使 得 浏览 者 在 访问 站 点 的 过 程 中 
体验 到 视觉 的 秩序 感 .新 奇 感 。 


1.2.3 网 站 开发 的 流程 


无 论 是 页 面 设计 还 是 网 站 系统 的 开发 ,都 需要 处 处 体现 精心 布置 的 需求 ,无 论 设计 者 
有 多 少 的 设计 原则 和 设计 规范 ,所 有 的 出 发 点 都 必须 围绕 需求 进行 ,所 以 正确 理解 产品 的 
服务 定位 ,把握 产品 的 功能 方向 ,才能 赢得 客户 的 满意 。 一 般 的 ,网 站 开发 分 为 以 下 几 个 
阶段 。 

(1) 客户 提出 需求 

客户 通过 电话 ,电子 邮件 或 在 线 订单 方式 提出 自己 网 站 建设 方面 的 “基本 需求 "。 主 
要 包括 公司 简介 栏目 描述 .基本 功能 需求 和 基本 设计 要 求 。 

(2) 需求 分 析 与 网 站 规划 设计 

设计 师 首 先 要 与 客户 进行 充分 沟通 ,明确 客户 建设 网 站 的 目的 和 具体 要 求 ,并且 全 面 
收集 各 种 资料 ,分 析 客 户 真 正 意图 。 

根据 企业 的 要 求 和 实际 状况 ,设计 适合 企业 的 网 站 方案 .明确 服务 器 解决 方案 .撰写 
网 站 规划 设计 说 明 书 ,并 对 网 站 主题 .风格 类 型 .版 式 布局 等 基础 元 素 进 行 确定 。 

(3) 确定 合作 

双方 以 面谈 .电话 或 电子 邮件 等 方式 ,针对 项 目 内 容 和 具体 需求 进行 协商 。 双 方 认可 
后 ,签署 (网 站 建设 合同 书 ) 并 支付 50% 网 站 建设 预付 款 。 

(4) 内 容 整 理 

根据 网 站 建设 方案 书 , 由 客户 组 织 出 一 份 与 企业 网 站 栏目 相关 的 内 容 材料 (电子 文档 
文字 和 图 片 等 ) ,设计 师 将 对 相关 文字 和 图 片 进行 详细 的 处 理 \ 设 计 、 排 版 .扫描 和 制作 ,这 
一 过 程 需 要 客户 给 予 积极 的 配合 。 

(5) 界面 设计 与 制作 ,以 及 程序 开发 

网 站 的 内 容 与 结构 确定 后 ,根据 网 站 风格 和 功能 进行 网 站 前 台 页 面 设计 与 后 台 程 序 
编写 ,使 得 网 站 基本 符合 客户 要 求 ,功能 使 得 客户 满意 。 

(6) 网 站 提交 与 客户 审核 

网 站 经 过 设计 制作 修改、 程序 开发 完成 后 ,需要 经 过 反复 测试 ,最 终 提交 给 客户 审 
核 ,客户 确认 后 ,支付 网 站 建设 余 款 。 同 时 ,网 站 程序 及 相关 文件 上 传 到 网 站 运行 的 服务 
器 ,至 此 网 上 正式 开通 并 对 外 发 布 。 

(7) 网 站 推广 及 后 期 维护 

网 站 建设 成 功 后 ,必须 有 一 个 详尽 而 专业 的 网 站 推广 方案 ,包括 著名 网 络 搜索 引擎 登 
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录 、 网 络 广告 发 布 . 邮 件 群 发 推广 和 Logo 互 换 链 接 等 。 


此 外 ,还 需要 对 网 站 运行 状态 进行 监控 ,并 对 网 站 运行 情况 进行 统计 ,发 现 问题 及 时 


解决 。 在 运行 过 程 中 还 需要 不 断 更 新 ,根据 客户 需求 增加 、 删 除 和 修改 相关 内 容 。 
综合 上 述 7 个 阶段 ,可 以 得 到 如 图 1-7 所 示 的 网 站 设计 工作 流程 图 。 


客户 提出 需求 | 客户 审核 最 终 确认 
i 
需求 分 析 与 TAEA 下 传 至 服务 器 
网 站 规划 设计 内 部 测试 对 外 发 布 
| | | 
治 谈 细节 
U | | 界面 外 观 设计 || 后 台 程序 开发 | 结算 尾款 
| N | 
ATAN 客户 提交 资料 
预付 款项 内 容 详细 整理 后 续 推广 与 维护 


1-7 网 站 开发 的 流程 示意 图 


1.2.4 网 站 前 端 开 发 环境 


对 于 网 站 前 端 页 面 的 开发 来 说 ,常用 的 软件 主要 有 以 下 几 种 。 
1. Dreamweaver 


Dreamweaver 是 最 广泛 的 网 页 编辑 工具 之 一 , 它 采 用 多 种 先进 技术 ,能 够 快速 高 效 
地 创建 极 具 表现 力 和 动感 效果 的 网 页 ,使 网 页 创作 过 程 变 得 非常 简单 。 

2. 文本 编辑 器 

任何 一 种 文本 编辑 器 都 可 以 编写 HTML ,比如 记事 本 、 写 字 板 和 Word 等 ,但 有 些 文 


本 编辑 器 专门 提供 网 页 制作 及 程序 设计 等 许多 有 用 的 功能 ,支持 HTML, CSS, PHP, 
ASP.Perl.C/C++ 、Java、JavaScript、VBScript 等 多 种 语法 的 着 色 显 示 。 


3. Office SharePoint Designer 2007 


Microsoft FrontPage 曾经 是 流行 的 制作 网 页 软件 之 一 ,2006 年 ,微软 公司 宣布 
FrontPage 将 被 两 款 专 业 的 网 页 设计 工具 所 取代 , 即 Office SharePoint Designer 和 
Microsoft Expression Web Designer。 其 中 ,Office SharePoint Designer 2007 提供 了 多 种 
专业 工具 ,利用 这 些 工 具 , 用 户 在 SharePoint 平台 上 无 须 编 写 代码 即 可 生成 交互 解决 方 
案 、 设 计 自 定义 SharePoint 网 站 以 及 使 用 报告 和 托管 权限 维护 网 站 性 能 。 


4. Visual Studio 


微软 的 Visual Studio 无 疑 是 非常 强大 的 编辑 器 ,支持 相应 程序 的 自动 语法 检查 , 目 


前 的 最 新 版 本 是 Visual Studio 2010, Visual Studio H EA C # 、VB、VC++ 等 程序 开发 
工具 , 集 程序 的 调试 ,编译 等 功能 于 一 身 , 并 且 还 提供 了 详细 的 帮助 ,这 是 任何 一 款 其 他 软 
件 都 不 能 比拟 的 。 


5. Photoshop 


Photoshop 在 网 站 效果 设计 、 图 像 编 辑 、 婚 纱 摄影 等 各 领域 广泛 应 用 , 它 已 成 为 许多 
涉及 图 像 处 理 的 行业 的 事实 标准 。 


6. Fireworks 


Fireworks 是 一 款 专 为 网 络 图 形 设计 的 网 站 制作 图 形 编辑 软件 , 它 在 矢量 图 形 的 处 
理 方面 有 其 独特 之 处 。 使 用 Fireworks 可 以 轻松 地 制作 出 尺寸 较 小 的 图 形 和 GIF 动画 。 


7. Flash 


Flash 是 一 款 优秀 的 网 页 动画 开发 软件 ,可 以 创建 从 简单 到 复杂 的 交互 式 Web 应 用 
程序 ,其 独特 的 编译 方式 和 跨 平 台 的 能 力 ,广泛 应 用 在 Web 程序 .游戏 软件 .多 媒体 娱乐 
等 方面 。 


1.2.5 相关 术语 


1. Internet 


Internet 指 的 是 国际 互联 网 。 它 是 由 那些 使 用 公用 语言 互相 通信 的 计算 机 连接 而 成 
的 全 球 网 络 。 一 旦 用 户 连接 到 它 的 任何 一 个 节点 上 ,就 意味 着 计算 机 已 经 连 人 互联 网 了 。 


2. 浏览 器 


浏览 器 是 指 万 维 网 (Web) 服 务 的 客户 端 浏览 程序 , 它 可 向 万 维 网 服务 器 发 送 各 种 请 
求 , 并 对 从 服务 器 发 来 的 超 文本 信息 和 各 种 多 媒体 数据 格式 进行 解释 .显示 和 播放 ,如 
图 1-8 一 图 1-10 所 示 。 


图 1-8 谷歌 浏览 器 图 1-9 正 浏 览 器 图 1-10 火狐 浏览 器 


3. URL 


URL(Uniform Resource Locator) 指 的 是 统一 资源 定位 符 , 也 被 称 为 网 页 地 址 ,是 
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Internet 上 标准 的 资源 地 址 。 
4. HTML 
HTML(Hypertext Markup Language) 是 用 于 描述 网 页 文档 的 一 种 标记 语言 。 
5. DHTML 


DHTML 是 Dynamic HTML 的 简称 , 指 的 是 动态 的 HTML, DHTML 不 是 一 种 技 
术 、 标 准 或 规范 ,只 是 一 种 将 目前 已 有 的 网 页 技术 .语言 标准 整合 运用 ,制作 出 能 在 下 载 后 
仍然 能 实时 变换 页 面 元 素 效果 的 网 页 设计 概念 。 


6.: TCP/IP 


TCP/IP( Transmission Control Protocol/Internet Protocol) 译 为 传输 控制 协议 / 因 特 
网 互联 协议 , 它 是 Internet 最 基本 的 协议 ,定义 了 电子 设备 如 何 连 入 Internet, 以 及 数据 
如 何在 它们 之 间 传 输 的 标准 。 


Ta: FEP 


FTP(File Transfer Protocol) 是 TCP/IP 网 络 上 两 台 计 算 机 传送 文件 的 协议 ,FTP 
是 在 TCP/IP 网 络 和 Internet 上 最 早 使 用 的 协议 之 一 。FTP 客户 机 可 以 给 服务 器 发 出 命 
令 来 下 载 文件 ,上 载 文件 ,创建 或 改变 服务 器 上 的 目录 。 


8. 域名 


域名 (Domain Name) 是 一 串 用 点 分 隔 的 名 字 , 它 组 成 了 Internet 上 某 一 台 计 算 机 或 
计算 机 组 的 名 称 。 由 于 IP 地 址 是 数字 标识 ,使 用 时 难以 记忆 和 书写 ,因此 在 IP 地 址 的 基 
础 上 又 发 展 出 一 种 符号 化 的 地 址 方案 ,来 代替 数字 型 的 IP 地 址 。 这 个 与 网 络 上 的 数字 型 
IP 地 址 相对 应 的 字符 型 地 址 ,就 被 称 为 域名 。 


9. 虚拟 主机 


虚拟 主机 是 使 用 特殊 的 软 硬 件 技术 ,在 网 络 服 务 器 上 划分 出 一 定 的 磁盘 空间 供用 户 
放置 站 点 和 应 用 组 件 等 文件 ,提供 必要 的 站 点 功能 .数据 存放 和 传输 功能 。 

由 于 多 台 虚 拟 主机 共享 一 台 真 实 主机 的 资源 ,每 个 用 户 承 受 的 硬件 费用 、 网 络 维护 费 
用 、 通 信 线 路 的 费用 均 大 幅度 降低 ,使 得 Internet 真正 成 为 人 人 用 得 起 的 网 络 。 


10. 服务 器 租用 


服务 器 租用 指 的 是 客户 租用 数据 中 心 的 服务 器 硬件 ,并 由 数据 中 心 的 工作 人 员 负 责 基 
本 软件 的 安装 .配置 ,负责 服务 器 上 基本 服务 功能 的 正常 运行 ,确保 客户 独 享 服务 器 的 资源 。 


11. 主机 托管 


主机 托管 指 的 是 企业 自身 拥有 服务 器 ,将 其 放置 在 Internet 数据 中 心 的 机 房 内 ,由 客 
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户 自己 进行 维护 ,或 者 是 由 其 他 的 签约 人 进行 远程 维护 ,这 样 企业 自身 的 服务 器 可 以 享受 
7> 24 小 时 全 天 候 值班 监控 、 稳 定 的 网 络 带 宽 , 恒 温 、 防 人 尘 、 防 火 、 防 潮 、 防 静电 等 专业 


服务 。 


A 


. 简 述 网 页 .网 站 和 首页 之 间 的 联系 。 

. 构成 网 页 的 基本 元 素 都 有 什么 ? 

. 什么 是 网 页 设计 ? 什么 是 网 页 制作 ? 

. 网 站 在 确定 主题 与 风格 定位 时 需要 注意 哪些 方面 ? 

. 简 述 网 站 建设 的 基本 流程 。 

.列举 常见 的 浏览 器 ,它们 的 内 核 相同 吗 ? 

. 什么 是 虚拟 主机 ? 什么 是 服务 器 租用 ? 什么 是 主机 托管 ? 


第 2 章 网 页 语言 基础 


口 了 解 HTML, XHTML 和 HTML5 之 间 的 联系 与 差异 。 

口 熟 练 掌握 常见 标签 的 含义 及 其 用 法 。 

口 掌握 CSS 基本 语法 ,能 够 创建 简单 网 页 。 

网 页 的 本 质 是 使 用 标签 语言 编写 的 一 篇 "文章 ”, 它 通过 浏览 器 的 解析 能 够 将 页 面 中 
的 元 素 表 示 出 来 ,那么 作为 网 页 的 设计 者 就 必须 对 这 种 标签 语言 有 所 了 解 。 本 章 首先 对 
当前 主流 的 标签 语言 加 以 介绍 ,然后 再 重点 讲解 常见 标签 的 含义 及 其 使 用 方法 ,最 后 配合 
有 关 CSS 的 基本 知识 完成 简单 页 面 的 设计 和 制作 。 


21 HM, XHM 和 HIM5 概 述 


HTMLXHTML 和 HTML5 都 属于 标签 语言 ,只 不 过 它们 的 严谨 程度 .新 旧 程 度 、 
标签 内 容 有 一 定 的 区 别 而 已 。 


2.1.1 HTML 


HTML 是 一 种 标签 语言 ,而 不 是 一 种 编程 语言 ,这 种 语言 的 结构 很 简单 ,只 要 明白 了 
各 种 标签 的 使 用 方法 便 学 懂 了 HTML, 


1. HTML 的 含义 


HTML(Hyper Text Markup Language) 是 一 种 用 于 描述 网 页 文档 的 超 文 本 标记 语 
言 。 它 定义 了 许多 带 有 语义 的 命令 ,虽然 浏览 器 中 不 会 显示 这 些 命令 ,但 是 它们 可 以 告诉 
浏览 器 如 何 显 示 文 档 内 容 ( 如 文本 、 图 片 和 其 他 媒体 等 )。 这 种 语言 还 可 以 通过 超 文 本 链 
接 把 用 户 的 文档 与 其 他 互联 网 资源 联系 起 来 。 

HTML 是 在 SGML(Standard Generalized Markup Language, 标 准 通用 标签 语言 ) 
定义 下 的 一 个 描述 语言 。 起 初创 建 SGML 的 目的 是 让 它 成 为 一 个 唯一 的 标签 语言 ,但 
SGML 太 过 广泛 和 全 面 ,以 至 于 设计 者 没有 办 法 使 用 它 。 要 想 高 效 地 使 用 SGML, 就 需 
要 复杂 和 昂贵 的 工具 ,这 些 条 件 远 远 超 出 了 普通 人 编写 HTML 文档 的 范围 。 所 以 ， 
HTML 采用 了 部 分 SGML 标准 ,使 得 HTML 易于 使 用 。 
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2. HTML 文档 


包含 HTML 标签 和 纯 文 本 的 文档 称 为 HTML 文档 ,又 因为 被 浏览 器 解析 后 以 网 页 
的 形式 显示 出 来 ,所 以 又 称 为 网 页 。 该 文档 的 扩展 名 为 “. htm” R“. html”, 两 者 并 无 
差别 。 


3. HTML 标签 


标签 (tag, 也 称 标记 ) 是 用 一 对 尖 括 号 <” 和 “二 ” 括 起 来 的 单词 或 单词 缩写 , 它 是 
HTML 文档 的 主要 组 成 部 分 。 每 个 标签 都 有 特定 的 描述 功能 ,HTML 文档 就 是 通过 不 
同 功 能 的 标签 来 控制 Web 页 面 内 容 的 。 图 2-1 所 示 的 是 超 链接 标签 常见 的 书写 方式 。 


<a href="http://www.ifeng.com/" style="color:#F60;"> 凤 凰 网 </a> 


| | | 
起 始 标签 。 标签 连接 属性 属性 值 标签 风格 属性 。 ”属性 值 标签 包含 的 内 容 ”结束 标签 


2-1 标签 


图 中 a 就 是 HTML 标签 的 一 种 ,在 此 的 作用 就 是 标示 超 链接 ,“ 二 a 二 "为 开始 标签 ， 
“二 /a 二 ”为 结束 标签 ,所 包含 的 内 容 就 在 两 个 标签 之 间 。 此 外 ,二 a 二 标签 中 还 包含 两 个 
属性 , 即 href 属性 和 style 属性 ,它们 分 别 标示 链接 的 地 址 和 外 观 , 属 性 的 值 要 用 等 号 进 
行 连接 ,并 用 双 引 号 进行 标注 。 此 外 ,并 不 是 所 有 的 标签 都 必须 是 成 对 出 现 的 ,如 img 标 
签 和 br 标签 等 。 


4. HTML 的 结构 


HTML 文档 结构 很 简单 ,由 最 外 层 的 二 html 二 标签 组 成 ,里 面 是 文档 的 头 部 和 主体 。 
在 Dreamweaver 中 新 建 一 个 HTML 文档 可 以 清晰 看 到 其 基本 结构 ,如 图 2-2 所 示 。 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; 
charset=utf-8"> 

<title> 无 标题 文档 </title> 

</head> 

<body> 

</body> 

</html> 


2-2 HTML 文档 的 基本 结构 


每 个 HTML 文档 都 有 头 部 (head) 和 主体 (body) , € 1145 H <head> #4 M< body> 
标签 分 隔 开 来 。 志 head 之 是 网 页 的 头 部 信息 .里面 包含 关于 网 页 自身 的 一 些 信息 , 它 主 要 
是 被 浏览 器 所 用 ,但 不 会 显示 在 网 页 的 正文 内 容 中 , 头 部 信息 通常 包括 二 title (标题)、 
<link> (£). <style> $R), < script > (JG K) 2 K < meta > ( X: TF fË B.) £ , 
所 body 之 是 放置 文档 实际 内 容 的 地 方 ,. 也 是 访问 者 在 浏览 器 中 看 到 的 内 容 。 

需要 特别 注意 的 是 ,这 里 DOCTYPE 的 含义 是 文档 类 型 ,浏览 器 需要 根据 此 文档 类 
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型 和 所 使 用 的 代码 型 号 解析 出 相应 的 网 页 ,DOCTYPE 直接 决定 了 浏览 器 的 显示 效果 ; 
meta 元 素 是 HTML 语言 头 部 的 一 个 辅助 性 标签 ,具有 定义 页 面 使 用 语言 .自动 刷新 并 指 
向 新 页 面 、 实 现 网 页 转换 时 的 动画 效果 、 网 页 定 级 评价 以 及 帮助 主页 被 各 大 搜索 引擎 检索 
等 功能 。 


2.1.2 XHTML 


1. XHTML 的 含义 


XHTML Æ The Extensible Hyper Text Markup Language( 可 扩展 超 文本 标识 语 
言 ) 的 缩写 , 它 是 一 种 标记 语言 ,不 需要 编译 便 可 直接 由 浏览 器 执行 ,表现 方式 与 超 文本 置 
标语 言 (HTML) 类 似 。 从 语法 方面 讲 ,可 以 说 XHTML 是 更 加 严格 更 纯净 的 HTML 版 
本 , 它 与 CSS 相 结 合 后 ,充分 体现 了 内 容 与 样式 分 离 这 一 理念 。 


2. XHTML 文档 的 基本 结构 


XHTML 文档 与 HTML 文档 结构 很 相似 ,但 还 是 有 多 方面 的 差别 。 在 XHTML 文 
档 中 必须 进行 文件 类 型 声明 (DOCTYPE declaration) ,必须 存在 html, head, body 元 素 ， 
而 且 title 元 素 还 要 位 于 head 元 素 中 。 为 了 更 加 方便 地 介绍 ,下 面 的 示例 给 出 了 一 个 最 
基本 XHTML 标准 网 页 的 文档 结构 ,如 图 2-3 所 示 。 


54pocTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"] 文档 类 型 

— ["http://www.w3.org/TR/xhtml1/DTD/xhtmll-transitional.dtd"> ` 

£ F2E [B] —EShtml xmlns="http:7/www.w3.org719997xhtm1"> 
<head> 


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 无 标题 文档 </title> 
</head> 


EE 体内 一 e335 


</html> 


图 2-3 XHTML 文档 的 基本 结构 


(1) 文档 类 型 声明 部 分 

文档 类 型 的 声明 部 分 由 二 ! DOCTYPE 二 标签 进行 定义 ,元 素 的 名 称 和 属性 必须 大 
F ,代码 中 DTD 表示 文档 类 型 定义 ,而 浏览 器 就 是 根据 定义 的 DTD 进行 解析 页 面 元 素 
的 ,网 页 文档 必须 有 正确 的 文档 类 型 ,否则 页 面 内 的 元 素 和 CSS 将 不 能 正确 生效 。 

(2) 名 字 空 间 

名 字 空 间 (Namespace) 是 通过 一 个 网 址 指向 来 识别 页 面 标签 的 。 在 XHTML 文档 
中 必须 使 用 xmlns 属性 声明 文档 的 命名 空间 。 

由 于 XHTML 是 HTML 向 XML 过 渡 的 标识 语言 ,因此 它 需 要 符合 XML 的 规定 ， 
这 也 是 为 什么 需要 定义 名 字 空 间 的 原因 。 此 外 ,目前 XHTML 1.0 还 不 允许 用 户 自 定义 
元 素 , 因 此 无 论 XHTML 文档 的 类 型 是 什么 它 的 命名 空间 值 都 相同 。 

(3) head 元 素 

网 页 头 部 元 素 head 也 是 XHTML 文档 中 必须 使 用 的 元 素 ,其 作用 与 HTML 文档 相 
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同 ,都 是 定义 页 面 的 头 部 信息 。 

(4) title 元 素 

页 面 元 素 title 用 于 定义 页 面 的 标题 ,在 预览 和 发 布 时 ,页 面 标题 所 包含 的 内 容 
示 在 浏览 器 的 标题 栏 中 。 

(5) body 元 素 

页 面 主体 元 素 body 用 来 定义 页 面 中 所 有 要 显示 的 内 容 ( 比 如 文本 、 超 链接 、 图 像 表 
格 和 列表 等 ) 。 


3. XHTML 的 语法 规则 


XHTML 语法 规则 比 HTML 语法 规则 要 严格 许多 ,具体 内 容 主要 分 为 以 下 几 方面 。 

(1) 所 有 的 标签 都 必须 关闭 ,即便 是 空 标签 也 必须 关闭 

在 HTML 文档 中 ,用 户 可 以 打开 多 个 标签 ,例如 在 使 用 二 li 二 标签 时 ,并 不 一 定 要 用 
二 /li 请 标签 将 其 关闭 ,而 在 XHTML 中 ,这 种 写法 是 不 合法 的 ,不 允许 出 现 没有 关闭 的 标 
签 。 如 果 是 单独 不 成 对 的 标签 ,也 要 在 标签 最 后 加 一 个 “/” 来 关闭 它 ,如 图 2-4 和 图 2-5 
所 示 。 


<body> <body> 
<p> 所 有 的 标签 都 必须 关闭 ， 即 便 是 空 标签 也 必须 关闭 。</p> <p> 所 有 的 标签 都 必须 关闭 ， 即 便 是 空 标签 也 必须 关闭 。 
<img src=" 插入 图 片 .png" width="156" height="143" /> <img src=" 插入 图 片 .png" width="156" height="143" > 
</body> </body> 
2-4 关闭 标签 时 的 正确 写法 2-5 关闭 标签 时 的 错误 写法 


(2) 所 有 标签 的 属性 必须 是 小 写 

与 HTML 不 同 ,XHTML 对 大 小 写 区 分 得 十 分 清楚 , 像 二 br 和 一 BR 二 是 两 个 不 同 
的 标记 。 在 XHTML 文档 中 标签 和 属性 的 名 字 必 须 是 小 写 , 且 大 小 写 混合 书写 也 是 不 被 
允许 的 ,如 图 2-6 和 图 2-7 所 示 。 


<body> 
<div id="main"> 


rc="; ges/1021.gif" width: "51" />2013.01.05</p> 
0 Emi E w ususin sim o> 
</div: 
</div> 
</body> 


图 2-6 标签 属性 大 小 写 时 正确 写法 


<BODY> 
<DIV ID="MAIN"> 
<DIV ID="MAIN-MAIN"> 
<P><IMG SRC="image: if" HEIGHT="51" />2013.01.05</P> 
EER ER E 8150075, TS 
</DIV> 
</DIV > 
</BODY> 


2-7 标签 属性 大 小 写 时 错误 写法 


(3) 所 有 标签 的 属性 值 必须 用 英文 格式 的 双 引 号 括 起 来 
在 HTML 中 ,不 需要 给 属性 值 加 引号 .但 是 在 XHTML 中 , 则 必须 加 上 引号 ,如 图 2-8 
和 图 2-9 所 示 。 


<body> <body> 
<p> 拓 有 标签 的 属性 值 必须 用 英文 格式 的 双 引 号 括 起 来 。 </p> <p> 所 有 标签 的 属性 值 必 须 用 英文 格式 的 双 引号 括 起 来 。</p> 
<img src=" 插入 图 片 .png" width="156" height="143" /> <img src= 插入 图 片 .png width=156 height=143 /> 
</body> </body> 

图 2-8 属性 值 引用 时 正确 写法 图 2-9 属性 值 引用 时 错误 写法 


(4) 所 有 标签 都 必须 合理 说 套 
在 XHTML 文档 中 ,如 果 使 用 多 个 元 素 进行 谋 套 ,必须 按照 打开 元 素 的 相反 顺序 进 
行 关闭 。 也 就 是 说 ,一 层 一 层 的 嵌 套 必须 严格 对 称 , 如 图 2-10 和 图 2-11 所 示 。 


<body> <body> 
<div id="nav"> <div id="nav"> 
<ul> <ul> 
<li><a href="#"> M</a></li> <li><a href="#"> 首 页 </1i></a> 
<li><a href="#"> 新 闻 </a></1i> <li><a href="#"> 新 闻 </1i></a> 
</ul> </ul> 
</div> </div> 
</body> </body> 
2-10 REREN EMEA 2-11 典 套 标签 时 错误 写法 


此 外 ,XHTML 中 还 有 一 些 严格 强制 执行 的 嵌 套 限制 ,主要 有 以 下 几 点 。 

D 二 a 一 元 素 中 不 能 包含 其 他 二 a 元素。 

© <pre> 3ú # rh À fë tg @ <object>, <big>, <img>, < small> , < sub > sË 
<sup> Rž. 

© <button > 3ú # rH + fië tg @ < input >, < textarea >, <label >, < select >, 
<button> ,<form>, <iframe> ,<fieldset> <isindex> 36 # , 

@ 二 label> 元 素 中 不 能 包含 其 他 的 二 label 二 元 素 。 

© 二 form 记 元 素 中 不 能 包含 其 他 的 二 form 记 元 素 。 

(5) 明确 属性 值 , 且 不 能 简写 

在 XHTML 文档 中 ,所 有 属性 都 必须 有 一 个 值 ,即便 是 没有 值 的 属性 也 必须 使 用 自 
己 的 名 称 作为 值 ,如 图 2-12 和 图 2-13 所 示 。 


<body> 
<form action="" method="get"> 
<input name="adc" type="checkbox" id="adc" checked="checked" /> 


</form> 
</body> 
2-12 属性 值 是 否 能 简写 时 的 正确 写法 
<body> 


<form action="" method="get"> 

<input name="adc" type="checkbox" id="adc" checked> 
</form> 
</body> 


图 2-13 属性 值 是 否 能 简写 时 的 错误 写法 


2:1-3 HTMLS 


HTML5 是 互联 网 研发 的 必然 趋势 之 一 , 它 具 有 提高 产品 品质 的 巨大 潜力 。 设 计 师 
唯 有 顺应 这 一 潮流 的 发 展 ,积极 投身 到 HTML5 的 试验 研发 中 ,才能 在 时 代 的 大 潮 中 握 
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有 先 机 。 
1. HTML5 简介 


简单 来 说 ,HTML5 是 对 HTML 标准 的 第 五 次 修订 ,其 主要 的 目标 是 将 互联 网 语义 
化 ,以 便 更 好 地 被 人 类 和 机 器 阅读 ,并 同时 降低 Internet 程序 (RIA) 对 Flash, Silverlight 
和 JavaFX 一 类 浏览 器 插件 的 依赖 ,以 便 提供 更 好 地 支持 各 种 媒体 的 嵌入 。 

HTML5 带 来 很 多 新 功能 ,以 及 HTML 代码 上 的 改变 ,新 增 了 一 些 元 素 和 属性 ,如 
二 nav 之 和 一 footer 记 ,这 种 标签 将 有 利于 搜索 引擎 的 索引 整理 ; 除了 原先 的 DOM 接口 ， 
增加 了 更 多 样 化 的 API, 如 实时 二 维 绘图 、 离 线 存 储 数据 库 、 拖 放 、 跨 文档 消息 和 可 控 媒 体 
播放 等 。 


<1D0cTYPE RTML> 
<html> 
人 

2. HTMLS 的 结构 CA ta http-equivenContent Type" 
content="text/html; charset=utf-8"> 
<title> 无 标题 文档 </title> 

HTML5 的 文档 类 型 声明 与 HTML 4. 0 或 XHTML “> 
<body> 


1. x 的 文档 类 型 声明 有 很 大 区 别 , 在 HTML5 中 不 需要 mea ms 
使 用 版 本 声明 ,不 区 分 大 小 写 , 书 写 方 式 也 简单 许多 ,而 且 人 saser> 


保持 了 向 后 兼容 性 , 即 “ 二 ! DOCTYPE HTML>”, liononec/yi> 
HTML5 文档 在 语义 结构 方面 也 有 很 大 改变 ， 人 centacr 人 /13> 
图 2-14 所 示 的 是 最 基本 的 页 面 结构 。 Setia 
° <head> BR 8, Hki R Sias D 
Web 页 面 的 介绍 性 信息 ,该 标记 可 以 包括 所 有 aae 
的 通常 放 在 页 面 头 部 的 标志 。 ESSE sas 


</footer> 


。 <nav> k: 用 于 放置 主 站 点 的 导航 信息 。 RE 

<section> HRE: 描述 一 个 有 主题 的 内 容 组 ,如 

章节 、 页 眉 、 页 脚 或 文档 中 的 其 他 部 分 。 

二 article 二 标签 : article 元 素 是 将 section 进行 

打包 形成 一 个 文档 或 网 站 独立 的 部 分 ,例如 一 篇 杂志 或 报纸 文章 ,或 一 篇 博客 

文章 。 

° 二 footer 志 标签: 描述 页 脚 信 息 , 可 以 应 用 在 section 中 ,也 可 以 用 于 一 个 页 面 的 
底部 。 


图 2-14 HTML5 文档 结构 


3. HTMLS 的 特性 


HTML 4. 0 主要 用 于 在 浏览 器 中 呈现 富 文 本 内 容 和 实现 超 链接 ,HTML5 继承 了 这 
些 特点 ,但 更 侧重 于 在 浏览 器 中 实现 Web 应 用 程序 。 对 于 网 页 的 制作 , HTML5 主要 有 
两 方面 的 改动 , 即 实现 Web 应 用 程序 和 用 于 更 好 地 呈现 内 容 。 

(1) 实现 Web 应 用 程序 

HTML5 引入 新 的 功能 ,以 帮助 Web 应 用 程序 的 创建 者 更 好 地 在 浏览 器 中 创建 富 媒 
体 应 用 程序 ,这 是 当前 Web 应 用 的 热点 。 多 媒体 应 用 程序 目前 主要 由 Ajax 和 Flash 来 
实现 ,HTML5 的 出 现 增强 了 这 种 应 用 。HTML5 用 于 实现 Web 应 用 程序 的 功能 如 下 : 
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。 绘画 的 canvas 元 素 , 该 元 素 就 像 在 浏览 器 中 嵌入 一 块 画 布 ,程序 可 以 在 画布 上 绘画 。 
° 更 好 的 用 户 交 互 操作 ,包括 拖 放 \ 内 容 可 编辑 等 。 

。 扩展 的 HTMLDOM APICApplication Programming Interface, 应 用 程序 编程 接口 ) 。 
° 本 地 离线 存储 。 

* Web SQL 数据 库 。 

。 离线 网 络 应 用 程序 。 

° 跨 文档 消息 。 

Web Workers 优化 JavaScript 执行 。 

(2) 更 好 地 呈现 内 容 

基于 Web 表现 的 需要 ,HTML5 引入 了 更 好 地 呈现 内 容 的 元 素 ,主要 有 以 下 几 项 。 
。 用 于 视频 、 音 频 播放 的 video 元 素 和 audio 元 素 。 

。 HFX article, footer, header nav, section 等 元 素 。 

。 功能 强大 的 表单 控件 。 


4. HTML5 元 素 
根据 内 容 类 型 的 不 同 ,可 以 将 HTML5 的 标签 元 素 分 为 7 类, 见 表 2-1。 
表 2-1 HTML5 的 内 容 类 型 


内 容 类 型 描 述 
Wik 向 文档 中 添加 其 他 类 型 的 内 容 ,例如 audio video ,canvas 和 iframe 等 
流 在 文档 和 应 用 的 body 中 使 用 的 元 素 ,例如 form、hl 和 small 等 


标题 段落 标题 ,例如 hl、h2 和 hgroup 等 

交互 与 用 户 交互 的 内 容 ,例如 音频 和 视频 的 控件 ,button 和 textarea 等 

元 数据 | 通常 出 现在 页 面 的 head 中 ,设置 页 面 其 他 部 分 的 表现 和 行为 ,例如 script、style 和 title 等 
短语 文本 和 文本 标签 元 素 , 例 如 mark、kbd、sub 和 sup 等 

片段 用 于 定义 页 面 片段 的 元 素 , 例 如 article、aside 和 title 等 


其 中 的 一 些 元 素 如 canvas ,audio 和 video, 在 使 用 时 往往 需要 其 他 API 来 配合 ,以 实 
现 细 粒度 控制 ,但 它们 同样 可 以 直接 使 用 。 


22 网 页 文件 的 创建 过 程 


能 够 编辑 HTML 文档 的 软件 很 多 ,如 Dreamweaver, Visual Studio 和 UltraEdit 等 ， 
这 些 软件 能 够 帮助 用 户 构建 大 部 分 HTML 文档 ,但 作为 初学 者 来 说 不 需要 任何 第 三 方 
工具 就 可 以 学 习 HTML。 本 节 使 用 纯 文 本 编辑 器 (记事 本 ) 来 创建 一 个 网 页 ,通过 这 个 简 
单 的 案例 学 习 网 页 的 编辑 .保存 和 测试 的 过 程 。 

【演练 2-1】 使 用 记事 本 编辑 HTML 文档 。 

D 执行 “开始 ”所 有 程序 ”一 附件 ”记事 本 ”命令 ,打开 记事 本 。 
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O 创建 网 页 。 按 照 之 前 所 讲 的 HTML 规则 ,在 “记事 本 "窗口 中 输入 相关 内 容 , 如 
图 2-15 所 示 。 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 

<title> 使 用 记事 本 创建 HTML 文 档 </title> 

</head> 


<body style="background:url(2-1 bg.jpg) no-repeat;"> 

<h1> 使 用 记事 本 创建 HTML 文 档 </h1> 

<p> 这 是 我 创建 的 第 一 个 网 页 ， swnamus, 也 没有 增加 过 多 的 修饰 ， 但 我 想 以 后 一 定 会 成 功 的 ! </p> 
</body> 

</html> 


图 2-15 使 用 笔记 本 编辑 HTML 


@ 保存 网 页 。 在 记事 本 的 菜单 栏 中 ,执行 “文件 ”>“ 保 存 "命令 ,此 时 弹出 “另存 为 ” 
对 话 框 。 在 该 对 话 框 的 “保存 在 "下拉 列表 框 中 选择 文件 存放 的 路 径 ; 在 “文件 名 ”文本 框 
中 输入 扩展 名 “. html”, 这 里 输入 “使 用 记事 本 创建 HTML 文档 . html”; 在 “保存 类 型 "下 
拉 菜单 中 选择 * 文 本 文档 ”, 最 后 单 击 * 保 存 * 按 钮 即 可 。 

@ 启动 Internet Explorer 浏览 器 。 将 刚才 制作 完成 的 网 页 文档 拖 放 到 浏览 器 内 部 ， 
或 者 执行 浏览 器 菜单 栏 中 的 “文件 ”>* 打 开 ” 
命令 ,弹出 “打开 ”对 话 框 ,如 图 2-16 所 示 。 

O 单 击 “浏览 ”按钮 ,在 打开 的 对 话 框 中 | Q masaqa ss U, mes 
找到 刚才 保存 的 “使 用 记事 本 创建 HTML X: |770: šj 
Pi. html* 文 件 。 在 “打开 ”对 话 框 中 , 单 击 * 确 TE O 
定 ” 按 钮 , 即 可 看 到 网 页 效果 ,如 图 2-17 所 示 。 
预览 后 如 果 有 需要 修改 的 地 方 ,还 可 以 在 “ 记 图 2-16 “打开 ”对 话 框 (1) 
事 本 ”中 打开 该 网 页 文件 进行 修改 。 


/5 使 用 记事 本 创建 HTML 文 档 - Windows Internet Explorer DER 


由 F. Wapa WN 2-1- 使 用 记事 本 编辑 电文 档 htnl jp 
RD FEV BRAW IAV MMW 
f 使 用 记事 本 创建 ml 文档 从 > 3e- O- R0 IAW- @- 


使 用 记事 本 创建 HTMIL 文 档 
这 是 我 创建 的 第 一 个 网 页 ， 虽 然 内 容 很 简单 ， 也 没有 增加 过 多 的 悠 麟 。 n. 
a 


图 2-17 预览 效果 (1) 


23 常用 标 俭 


HTML、XHTML 和 HTML5 都 属于 标签 语言 ,它们 之 间 有 很 大 一 部 分 标签 都 是 通 
用 的 ,本 节 主 要 对 那些 常用 的 标签 进行 介绍 。 


2.3.1 标题 标签 .段落 标签 与 换行 标签 

1. 标题 标签 

在 网 页 中 使 用 h 系列 的 标签 标示 标题 ,h 系列 的 标签 共有 6 个 , 即 二 hl 之 一 二 h6>， 
它们 之 间 的 区 别 类 似 于 大 纲 的 级 别 ,二 hl 二 代表 顶级 的 标题 ,字号 最 大 ; 志 h6 二 标题 级 别 
最 小 ,字号 也 最 小 。 标 题 标签 的 格式 为 


<h# align = "left|center|right"> 标题 文字 </h#> 


“ 井 ” 用 来 指定 标题 文字 的 大 小 ,# 取 1 一 6 的 值 ,属性 align 用 来 设置 标题 在 页 面 中 的 
对 齐 方式 ,包括 : left( 左 对 齐 ) ,center( 居 中 ) 或 right( 右 对 齐 ) ,默认 为 left, 

需要 说 明 的 是 ,这 种 在 标签 内 添加 align 属性 的 做 法 正在 被 淘汰 ,取而代之 的 是 使 用 
CSS 控制 标题 的 相关 属性 ,关于 CSS 的 内 容 将 在 后 续 章 节 着 重 讲解 。 

【演练 2-2】 标题 标签 示例 。 

O 打开 “记事 本 ”程序 ,在 其 中 输入 如 图 2-18 所 示 的 代码 ,并 另存 为 网 页 文档 。 

@ 打开 浏览 器 预览 刚才 制作 的 网 页 文档 ,其 效果 如 图 2-19 所 示 。 


GO [ervmmsceovns o x [/ 
ze MD HV SRRA IAD 机 >” 
RORA sess TE 


sy FL in 
这 是 一 级 标题 
这 是 二 级 标题 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 这 是 三 级 标题 
<html> 
<head> 这 是 四 级 标题 
<meta http-equiv="Content-Type" content="text/html; 
charset=utf-8"> 这 是 五 级 标 是 
<title> 标 题 标签 </title> a 
</head> wass 
这 是 经 过 样式 改变 的 一 级 标 是 
<body> = 
<h1> 这 是 一 级 标题 </h1> 这 是 经 过 样式 改变 的 二 级 标题 
<h2> 这 是 i 
Zhai 这 是 经 过 样式 改变 的 三 级 标题 


<h4> 这 是 四 级 标题 </h4> 


<h5> 这 是 五 级 标题 </h5> 这 是 经 过 样式 改变 的 四 级 标题 
<h6> 这 是 六 级 标题 </h6> 
<hl style="font-size:14px;"> 这 是 经 过 样式 改变 的 一 级 标题 </h1> 这 是 经 过 样式 改变 的 五 级 标题 


<h2 style="font-size:16px;"> 这 是 经 过 样式 改变 的 二 级 标题 </h2> 
<h3 style="font-size:18p > 这 是 生 过 样式 训 交 的 三 经 标题 </h3> 
<h4 style="font-size:20px; "> 过 际 题 </h4> P " poop 
<h5 style="font-size:22px; "> 这 是 经 过 样式 改变 的 五 级 标题 </h5> 这 是 经 过 样式 改变 的 六 级 标题 
<h6 style="font-size:24px;"> 这 是 经 过 样式 改变 的 六 级 标题 </h6> 
</body> 

</html> 更 我 的 电脑 FOLTS 


图 2-18 页 面 代 码 (1) 图 2-19 预览 效果 (2) 
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第 2 章 网 页 语言 基础 


从 本 例 可 以 看 出 ,默认 状态 下 h 系列 标签 标 能 够 以 不 同 大 小 显示 其 内 容 , 但 如 果 为 其 
增加 CSS 样式 即便 hl 元 素 也 可 能 显示 较 小 的 字体 。 


2. 段落 标签 


去 p 二 标签 是 一 个 具有 特定 语义 的 标签 ,为 了 使 文字 段落 排列 得 整齐 清晰 ,段落 之 间 
通常 使 用 一 p 之 和 志 /p> 标 签 定义 段落 。 虽 然 , 志 p 二 标签 常 出 现在 文章 段落 中 ,但 并 不 
是 所 有 内 容 都 要 放 在 <p 二 标签 中 ,二 p 二 标签 同样 可 以 翌 套 在 其 他 元 素 中 。 段 落 标 签 的 
格式 为 


<p> 文 字 </p> 


要 想 控 制 段落 标签 内 部 文字 的 各 种 属性 ,推荐 使 用 CSS 规则 ,后 续 内 容 将 着 重 讲解 
编写 规则 的 语法 ,这 里 仅 做 简单 介绍 。 

【演练 2-3】 段落 标签 示例 。 

O 打开 “记事 本 ”程序 ,在 其 中 输入 如 图 2-20 所 示 的 代码 ,并 另存 为 网 页 文档 。 

@ 打开 浏览 器 预览 刚才 制作 的 网 页 文档 ,其 效果 如 图 2-21 所 示 。 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/1oose.dtd"> 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
tl ere 

</head> 


SARTRE p 标签 定义 ，</P: 

ext-align: left; REAR. 这 里 是 段落 . zir, RELRE. </p> 
ext-align:center; "> 这 里 是 段落 。 这 里 是 段落 。 是 段落 。 这 里 是 段落 。</p> 
<p style-"text-align:right ;"> 这 里 是 段落 . 这 里 是 段落 . SEE 这 里 是 段落 。</P> 
</body> 

</html> 


Æ 2-20 ”页面 代 码 (2) 图 2-21 预览 效果 (3) 


从 预览 效果 图 中 可 知 ,由 于 为 段落 增加 了 “对 齐 ” 属 性 ,所 以 段落 文字 呈现 出 不 同 的 排 
列 效果 ,虽然 这 种 处 理 方法 能 够 使 文字 进行 对 齐 操作 ,但 在 实际 工作 中 并 不 常用 。 


3. 换行 标签 

网 页 的 内 容 并 不 都 是 像 段 落 那 样 整齐 排列 的 ,有 些 时 候 没有 必要 使 用 多 个 p 标签 去 
分 割 内 容 , 这 时 就 可 以 使 用 br 标签 插入 一 个 简单 的 换行 符 来 实现 换行 效果 。 

br 标签 将 打 断 HTML 或 XHTML 文档 中 正常 段落 的 行 间 距 和 换行 。 在 HTML 中 


它 没 有 结束 标签 ,仅仅 是 指出 文本 流 中 要 从 哪里 开始 新 的 一 行 。 但 是 在 XHTML 中 则 必 
须 将 此 标签 进行 关闭 。 强 制 换行 标签 的 格式 为 


XF <br 人 > 


浏览 器 解释 时 ,从 该 处 换行 。 换 行 标签 单独 使 用 ,可 使 页 面 清晰 .整齐 。 
【演练 2-4】 换行 标签 示例 。 
D 打开 “记事 本 ”程序 ,在 其 中 输入 如 图 2-22 所 示 的 代码 ,并 另存 为 网 页 文档 。 
@ 打开 浏览 器 预览 刚才 制作 的 网 页 文档 ,其 效果 如 图 2-23 所 示 。 
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I 标签 示例 - vi... DOR 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" iu. 


"http://www.w3.org/TR/html4/loose.dtd"> 4 同属 村 编写 汇总 \ 前 v| 
XPD REO FEV wj" 


<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title> 换 行 标签 示例 </title> 


</head> 
使 用 换行 符 换行 
<body> 
<div id="box: = tas 
h3 FAROTAN /h3 功 盖 三 分 国 ， 名 成 八 阵 图 。 
了 > 动 生 三 分 国 ， 吉 成 人 际 田 ，<br /> 江 流 石 不 转 ， 遗 恨 失 香 吴 " 
IRATE, BREES. <br /> 4 
</p> 使 用 段落 标签 换行 
</div> 
<div iq="box2" =; m 
> 功 盖 三 分 国 ， 名 成 八 件 图 。 
<p>: </p> s w 5 
s BRAES. </p> WETH, RRES. 
iv ia="po 使 用 Css 控制 段落 间距 
二 证 RE o > n 
<p styl 0; "> </p> — P K e 
Tn RTR RARR I IRAR, s 5 
</div> 
SS 总 我 的 电脑 far Rios ~ 


图 2-22 页 面 代码 (3) 图 2-23 预览 效果 (4) 


本 例 中 使 用 三 种 方式 进行 换行 效果 的 演示 ,从 预览 效果 图 中 可 以 发 现 使 用 br 标签 进 
行 换行 , 行 间距 没有 变化 ; 使 用 p 标签 进行 换行 , 行 间 距 变 大 (其 实 是 段落 间距 ); 使 用 
CSS 对 元 素 进 行 控制 后 ,也 能 恢复 正常 的 行 间 距 外 观 。 上 述 三 种 方式 仅 是 让 读者 体会 br 
标签 的 不 同 , 在 实际 工作 中 要 使 用 br 标签 进行 换行 。 此 外 ,br 标签 的 写法 有 些 特别 ,不 
是 二 br> 或 者 一 br> 一 /br> ,而 是 一 br/ 二 。 


2.3.2 超 链 接 标 签 与 图 像 标 签 


1. 超 链接 标签 


在 HTML 或 XHTML 中 使 用 二 a 二 标签 创建 超 链接 。 超 链接 可 以 是 长 短 不 一 的 句 
子 ,也 可 以 是 一 幅 图 像 , 当 浏 览 者 把 鼠标 指针 移动 到 网 页 中 的 某 个 超 链 接 上 时 ,鼠标 指 
针 会 变 成 “ 忠 ”, 当 单 击 该 超 链接 时 会 跳 转 到 其 他 页 面 或 打开 指定 的 程序 。 所 a> 标 签 
的 格式 为 


<a href = "URL" target = "打开 窗口 方式 "> 热点 </a> 


href 属性 为 超 文本 引用 , 它 的 值 为 一 个 URL, 是 目标 资源 的 有 效 地 址 。 如 果 要 创建 
一 个 不 链接 到 其 他 位 置 的 空 超 链 接 , 则 可 用 “# ”代替 URL, target 属性 设 定 链 接 被 单 击 
后 所 要 开始 窗口 的 方式 ,可 选 值 为 : _blank、parent、self、top。 

【演练 2-5】 超 链接 标签 示例 。 

D 打开 “记事 本 ”程序 ,在 其 中 输入 如 图 2-24 所 示 的 代码 ,并 另存 为 网 页 文档 。 

@ 打开 浏览 器 预览 刚才 制作 的 网 页 文档 ,其 效果 如 图 2-25 所 示 。 
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<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www. w3.org/TR/html4/loose.dtd"> 


<html> 
<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title> 超 链接 标签 示例 </title> 

</head> 


<body> 
<h1> 常 见 的 超 链接 类 型 </h1> 

<p><a href="http://www.baidu.com"> 外 部 链接 </a></p> 
<p><a href="#"> 内 部 链接 </a></p> 

<p><a href="mailto:wufeng11218126.com"> 邮 件 链接 c/a></p> 
</body> 

</html> 


图 2-24 页 面 代码 (4) 图 2-25 预览 效果 (5) 


本 例 包含 外 部 链接 ( 单 击 后 链接 到 其 他 网 站 ) 、 本 页 面 链 接 ( 单 击 后 还 是 当前 页 面 ) ,以 
及 邮件 链接 ( 单 击 后 打开 Outlook 软件 )3 种 类 型 的 链接 ,而 且 志 a 之 标签 内 均 包 含 “href” 
属性 ,该 属性 的 作用 是 创建 指向 另 一 个 文档 的 链接 。 需 要 特别 注意 的 是 , 当 创 建 的 链接 是 
本 站 点 外 的 链接 时 ,必须 包含 “http://”。 


2. 图 像 标签 


在 HTML 和 XHTML 中 ,图 像 由 二 img 二 标签 定义 ,该 标签 是 空 标 签 , 即 它 只 包含 属 
性 ,没有 闭合 标签 。 图 像 标签 的 格式 为 


< img src = "图 像 文件 名 " alt = "简单 说 明 "width = "图 像 宽度 " height = "图 像 高 度 " /> 


标签 中 的 属性 说 明 如 下 。 

sre: 指出 要 加 入 图 像 的 文件 名 , 即 “ 图 像 文件 的 路 径 \ 图 像 文件 名 ”。 

alt: 在 浏览 器 尚未 完全 读 和 人 图像 时 ,在 图 像 位 置 显示 的 文字 。 

width: 宽度 (像素 数 或 百分数 )。 通 常 只 设 为 图 像 的 真实 大 小 以 免 失真 。 若 需要 改 

变 图 像 大 小 , 则 最 好 事先 使 用 图 像 编辑 工具 进行 修改 。 百 分 数 是 指 相对 于 当前 浏览 器 窗 
口 的 百分比 。 

height; 设 定 图 像 的 高 度 ( 像 素数 或 百分数 ) 。 

【演练 2-6】 图 像 标签 示例 。 

D 打开 “记事 本 ”程序 ,在 其 中 输入 如 图 2-26 所 示 的 代码 ,并 另存 为 网 页 文档 。 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title> 图 像 标签 示例 </title> 
</head> 
<body> 
<h3> 图 像 标签 示例 </h3> 
<img src="2-6.jpg”alt=" 安 卓 操作 系统 " width="240" height="320"> 


</body> 
</html> 


图 2-26 页 面 代码 (5) 
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@ 打开 浏览 器 预览 刚才 制作 的 网 页 文档 ,其 效果 如 图 2-27 
所 示 。 

本 例 中 使 用 二 img 过 标签 插 入 了 一 幅 图 像 ,从 页 面 代码 
中 可 以 看 出 ,要 在 页 面 中 显示 图 像 , 需 要 使 用 “src( 源 属性 )”， 
该 属性 的 值 就 是 图 像 的 URL 地 址 。 下 面 对 一 img 过 标签 中 
常见 的 属性 加 以 解释 。 

(1) src 属性 

src 属性 是 必须 存在 的 , 它 的 值 就 是 图 像 文件 的 URL, 也 
就 是 引用 该 图 像 文 档 的 绝对 地 址 或 相对 地 址 。 为 了 方便 文档 
的 存储 ,一般 将 图 像 文件 存放 在 一 个 单独 的 文件 夹 中 ,而且 通 
常会 将 这 个 目录 命名 为 images 或 pic 之 类 的 名 称 。 此 外 ,本 
例 中 由 于 图 像 与 网 页 文档 处 在 同一 目录 下 ,所 以 只 用 书写 图 
像 名 称 即 可 ,如 果 图 像 位 于 www. yyy. com 的 images 目录 
中 ,那么 其 URL 为 http: // www. yyy. com/images/2-6. jpg, 

(2) alt 属性 图 2-27 预览 效果 (6) 

alt 属性 指定 了 替代 文本 ,用 于 在 图 像 无 法 显示 的 时 候 , 代 替 图 像 显示 在 浏览 器 中 的 内 
容 。 此 外 , 当 鼠 标 移动 到 该 图 像 上 方 时 ,浏览 器 同样 会 在 一 个 文本 框 中 显示 这 个 描述 性 文本 。 

(3) width 属性 和 height 属性 

width 属性 和 height 属性 用 于 定义 图 像 的 宽度 和 高 度 。 为 图 像 指定 height 属性 和 
width 属性 是 一 个 好 习惯 ,如 果 设 置 了 这 些 属 性 ,就 可 以 在 页 面 加 载 时 为 图 像 预 留 空间 。 
如 果 没 有 这 些 属性 ,浏览 器 就 无 法 了 解 图 像 的 尺寸 ,也 就 无 法 为 图 像 保 留 合 适 的 空间 , 因 
此 当 图 像 加 载 时 ,页面 的 布局 就 会 发 生变 化 。 


2.3.3 列表 标签 


目前 ,列表 元 素 在 网 页 中 的 应 用 十 分 广泛 ,导航 条 、 栏 目 区 域 、. 搜 索 结果 等 重要 布局 都 
是 通过 列表 和 CSS 来 实现 的 。 列 表 分 为 三 种 .分 别 是 无 序列 表 、 有 序列 表 和 自 定义 列表 ， 
下 面 通过 示例 加 以 介绍 。 

【演练 2-7】 列表 标签 示例 。 

D 打开 “记事 本 ”程序 ,按照 HTML 文档 的 基本 结构 在 其 body 元 素 内 部 输入 如 图 2-28 
所 示 的 代码 。 

@ 在 页 面 head 元 素 内 部 ,创建 如 图 2-29 所 示 的 代码 ,并 另存 为 网 页 文档 。 

@ 打开 浏览 器 预览 刚才 制作 的 网 页 文档 ,其 效果 如 图 2-30 所 示 。 

对 于 无 序列 表 来 说 ,浏览 器 会 在 每 个 条 目前 面 添加 一 个 项 目 符号 ,并 让 其 独占 一 行 ， 
而 且 每 行 会 针对 文档 的 左边 界 缩 进 一 定 距离 。 

对 于 有 序列 表 来 说 ,默认 情况 下 浏览 器 会 从 *1? 开 始 自动 对 有 序 条 目 进行 编号 ,如 果 
需要 使 用 其 他 类 型 的 编号 或 从 指定 的 编号 上 累计 编号 ,可 以 通过 所 ol 二 标签 的 “type” 属 
性 (用 于 更 改编 号 的 类 型 ) 和 “start" 属 性 (用 于 指定 有 序列 表 的 开始 编号 ) 实 现 。 
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<body> 
<div class="bo: 
<h3> 无 序列 表 标 各 
<ul> 
<li><a href="#"> 公 ; 


> 
示例 </h3> 


司 简介 </a></1i> 


<li><a hre: 公司 荣誉 </a></1i> 

<li><a href="#"> 对 外 合作 </a></1i> 
</ul> 
</div> 


<div class="box"> 
<h3> 有 序列 表 标 签 示例 </h3> 
<ol> 
<li><a href="#"> 公 司 简 介 </a></1i> 
<li><a href="#"> 公 司 荣誉 </a></1i> 
<li><a href="#"> 对 外 合作 </a></1i> 


</ol> 
</div> 
<div class="box"> 
<h3> 自 定义 列表 标签 示例 </h3> 
<dl> 
<dt>HTML</dt> <style type="text/css"> 
<dd>HTML《〈 超 文本 标签 语言 ) 是 一 种 用 于 文档 布局 和 超 box ( 
文本 链接 规范 的 语言 。</dd> border:1px #F00 solid; 
<dt>XHTML</dt> margin: Spx; 
<dd> 从 语法 方面 讲 ， 可 以 说 xHTML 是 更 加 严格 更 纯净 的 padding: Spx; 
HTML 版 本 。</dd> width:200px; 
</dl> float:left; 
</div> + 
</body> </style> 


图 2-28 页 面 代码 (6) 图 2-29 CSS 代码 


HEERA - Windows Internet Explorer 


go- © Balx] [P : FB 
XPO MV FEV 收藏 天 () IAV WHW 
ARR ØNRRETA A-D Se- v- 220- TRO- @- 


无 序列 表 标签 示例 有 序列 表 标签 示例 自 定义 列表 标签 示例 
。 公 司 简介 


HTML 
.公司 荣光 HTML ( 超 文本 标签 语 
.对 外 合作 言 ) 是 一 种 用 于 文档 
局 和 得 本 人 的 


从 语法 方面 讲 ， 可 以 说 
XHTML 是 更 加 严格 更 
纯净 的 HTML 版 本 。 


230 预览 效果 (7) 


对 于 自 定义 列表 来 说 ,每 一 项 的 名 称 不 再 是 二 li 二 标签 ,而 是 用 二 dt 二 标签 进行 标记 ， 
后 面 跟着 由 过 dd 之 标签 标记 的 条 目 定义 或 解释 。 默 认 情 况 下 ,浏览 器 一 般 会 在 左边 界 显 
示 条 目 或 术语 的 名 称 , 并 在 下 一 行 缩 进 显示 其 定义 或 解释 。 在 二 dl 二 、 二 dt 王 和 二 dd 请 三 
个 标签 组 合 中 ,一 dt 二 是 标题 ,二 dd 之 是 内 容 , 二 dl 二 可 以 看 做 是 承载 它们 的 容器 , 当 出 现 
很 多 组 的 时 候 尽量 使 用 一 个 过 dt> 标 签 配合 一 个 二 dd> 标 签 的 方法 。 如 果 所 dd> 标 签 中 
内 容 很 多 , 则 可 以 嵌 套 二 p 二 标签 使 用 。 


2.3.4 表格 标签 


在 HTML 中 表格 由 table 元 素 以 及 一 个 或 多 个 tr、th 或 td 元 素 组 成 ,可 以 将 任何 东 
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西 (如 图 像 .表单 ,甚至 另 一 个 表格 ) 放 进 表格 内 。 
表格 的 标签 为 二 table> , 行 的 标签 为 二 tr> , 表 项 的 标签 为 二 td 之 。 其 中 ,二 tr> 是 单 
标签 ,一 行 的 结束 是 新 一 行 的 开始 。 表 项 内 容 写 在 二 td> 与 二 /td> 之 间 。 志 table> 标 签 
必须 成 对 使 用 ,简单 表格 的 格式 为 
< table border = "n" width = "x|x%" height = "yly%" cellspacing = "i" cellpadding = "j"> 
< caption align = "left|right|top|bottom valign = top| bottom > 标题 </caption> 


<tr><th> 表 头 1 </th><th> 表 头 2</th><th>...</th><th> 表 头 n</th></tr> 
<tr><td> 表 项 1</td><td> 表 项 2</td> < td>...</td>< td> 表 项 n</td></tr> 


<tr><td> 表 项 1</td><td> 表 项 2</td> < td>...</td> < td> 表 项 n</td></tr> 
</table> 
为 了 能 清楚 地 讲解 各 种 元 素 的 含义 ,这 里 先 给 出 一 个 示例 。 
【演练 2-8】 表格 标签 示例 。 
O 打开 “记事 本 ”程序 ,按照 HTML 文档 的 基本 结构 在 其 body 元 素 内 部 输入 如 图 2-31 
所 示 的 代码 ,并 保存 为 网 页 文件 。 


<body> 
<table width="100%" border="3" cel 
<caption> 
显卡 驱动 程序 下 载 


</caption> 


ing="1" cellpadding="2" 


th scope="row">1</tb 
td>Intel 英 特 尔 Graphics Media Accelerator 3600 显 卡 驱动 


8.14.8.1077 版 For Win7-32</td 
d><img src="2-8.jpg” width="178" height="42"></td> 


</table: 
</body> 


图 2-31 页 面 代码 (7) 


@ 打开 浏览 器 预览 刚才 制作 的 网 页 文档 ,其 效果 如 图 2-32 所 示 。 


[S RIKERA - Vindovs Internet Explorer 
GO -nese hal V ¿+ X |/ 
文件 中。 RAV FFV HRW IAV HHV 

ARER ØRRRERN a- g 


显卡 驱动 程序 下 载 


FSB 


3 @ - mü) 220- IRV- @- 


序号 版 本 下 载 
1 Intef t} Graphics Media Accelerator 3600 显 卡 驱动 8.14 8.1077 版 For Win7-32 Ei 


ET 


2-32 ”预览 效果 (8) 


1. 二 table 二 标签 
二 table 二 标签 与 二 /table 二 结束 标签 在 文档 中 定义 一 个 表格 ,其 中 包含 了 很 多 属性 。 
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(1) border 属性 

border 属性 为 二 table 二 标签 的 可 选 属性 ,其 作用 是 告诉 浏览 器 在 表格 、 表 格 里 的 行 
和 单元 格 的 周围 画 线 ,默认 情况 下 是 没有 边框 的 。 本 例 中 为 border 属性 指定 了 一 个 值 ， 
这 个 整数 值 就 是 环绕 在 表格 外 3D 镶 边 的 像素 宽度 。 

(2) cellspacing 属性 

cellspacing 属性 用 于 控制 表格 中 相 邻 单元 格 的 间距 以 及 单元 格外 边沿 和 表格 边沿 之 
间 的 间距 。 

(3) cellpadding 属性 

cellpadding 属性 用 于 控制 单元 格 的 边沿 和 它 内 容 之 间 的 距离 ,默认 值 为 一 个 像素 。 

(4) scope 属性 

scope 属性 可 以 将 数据 单元 格 与 表 头 单元 格 联 系 起 来 ,属性 值 *row” 会 将 表 头 行 包括 
的 所 有 表格 都 和 表 头 单元 格 联系 起 来 ; 属性 值 "col” 会 将 当前 列 的 所 有 单元 格 和 表 头 单元 
格 绑 定 起 来 。 


2. 二 tr 二 标签 


二 tr 二 标签 用 于 定义 表格 中 的 行 。 二 tr 二 标签 中 可 以 放 惫 一 个 或 多 个 单元 格 ,单元 
格 又 包括 二 th 二 标签 定义 的 表 头 ,以 及 由 二 td 二 标签 定义 的 数据 。 表 格 中 每 一 行 单元 格 
的 数据 ,都 与 最 长 的 单元 格 数据 相同 。 


3. <th> 5 <td> HRE 


E< ur bi 98, <h> <d> 3 2 EAT PEAREN <th> HR 
签 定义 表格 内 的 表 头 单元 格 ,在 th 元 素 内 的 文本 通常 会 以 粗 体 显示 ; 所 td 二 标签 用 于 定 
X HTML 表格 中 的 标准 单元 格 。 


2.3.5 表单 标签 


表单 让 HTML 和 XHTML 真正 具有 互 交 性 ,使 用 表单 可 以 创建 用 来 获取 和 处 理 用 
户 输入 数据 的 文档 ,同时 还 可 以 生成 个 性 化 的 回应 ,特别 是 在 电子 商务 网 站 应 用 方面 , 表 
单 更 是 具有 无 限 的 潜能 。 

表单 (form) 是 由 一 个 或 多 个 输入 文本 框 、 按 钮 . 复 选 框 、 下 拉 菜 单 或 图 像 映射 组 成 
的 ,这 些 元 素 都 放置 在 二 form 二 标签 中 。 一 个 文档 中 可 以 包含 多 个 表单 ,而 且 表 单 中 可 
以 放置 包括 文字 和 图 像 在 内 的 主体 内 容 。 

下 面 来 制作 一 个 简单 的 例子 ,对 表单 中 的 一 些 常 见 的 标签 进行 讲解 ,看 一 看 表单 是 如 
何 整 合 在 一 起 的 。 

【演练 2-9】 表单 标签 示例 。 

O 打开 “记事 本 ”程序 ,在 其 中 输入 如 图 2-33 所 示 的 代码 ,并 另存 为 网 页 文档 。 

@ 打开 浏览 器 预览 刚才 制作 的 网 页 文档 ,其 效果 如 图 2-34 所 示 。 
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网 页 设计 与 制作 案例 教程 (HTML + CSS + Dreamweaver) 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/htm14/1oose.dtd"> 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title> 表 单 标签 示例 </title> 

</head> 


<body> _ 

<h3> 表 单 标签 示 例 </h3> 

<form id="ww" name="ff" method="post" action="/example/form action.asp"> 
各 : 


<label for="na"></label> 
<input type="text" name="name" id="na" size="20" maxlength="40"/> O 表单 标签 示例 一 V 


<p> 性 别 ; 
<label> > E ?7: \ 教 材 编写 汇总 \ 反 图 4 
<input type="radio" name="sex" value="M" id-"sex 0" /> OQ enr 
Sc/1abel> XPO MED SEV KAR” 
<label> > 
<input type="radio" name="sex" value="F" id="sex_1" /> TRER ØRLRETI [ 
女 </1abel> J 
<p> 所 属 班级 : 表单 标签 示例 


<select name="degree" id="degree"> 
<option val > 计算 机 1301</option> 


<option vali > 计算 机 1302</option> W£, zs 
<option val > 计算 机 1303</option> 
<option value="4"> 计 算 机 1304</option> 
</se1eet> kz 222 
</p> 
<p> 所 属 班级 : | 


<input type="submit" name="button_1" id="button_1" value=" 提 交 " /> 
<input type="reset" name="button" id="button" value=" 重 置 " /> 


</body> 
</html> 


图 2-33 页面 代码 (8) 图 2-34 预览 效果 (9) 


在 本 例 的 源 代码 中 ,二 form 二 标签 说 明了 表单 的 开始 ,同时 表明 将 采用 post 方法 向 
表单 处 理 服 务 器 传送 数据 。 随 后 是 表单 的 用 户 输入 控件 ,其 中 每 个 控件 都 是 用 二 input 二 
标签 和 type 属性 定义 的 。 

在 这 个 示例 中 共有 四 个 控件 ,第 一 个 控件 是 文本 域 ,允许 用 户 最 多 输入 40 个 字符 ,但 一 
次 最 多 只 MEET 20 个 字符 ; 第 二 个 控件 是 一 组 单 选 按钮 ,用 户 只 能 从 2 个 单 选 按钮 中 选择 
其 中 一 个 ; 第 三 个 控件 是 一 个 下 拉 菜 单 ,可 以 从 4 个 选项 中 选择 一 个 ; 第 四 个 控件 是 简单 的 
qanta ,用 户 单 击 此 按钮 后 ,输入 信息 会 发 送 到 服务 器 上 名 为 “form_action. asp” 的 页 面 。 


1. 二 form 过 标签 


到 form 过 标签 用 于 为 用 户 输入 创建 HTML 表单 。 在 文档 主体 中 ,表单 可 以 被 放置 
于 任何 位 置 , 只 要 将 表单 的 元 素 都 放 在 二 form 二 标签 与 二 /form 二 结束 标签 中 就 可 以 ,此 
外 form 元 素 是 块 级 元 素 ,其 前 后 会 产生 换行 。 

(1) action 属性 

<form> RE PURE action( 动 作 ) 属 性 ,此 属性 说 明了 接收 和 处 理 表单 数据 的 
应 用 程序 的 URL。 通 常 Web 管理 员 将 表单 处 理应 用 程序 放 在 Web 服务 器 上 名 为 “cgi- 
bin” 的 目录 下 。 一 个 带 有 action 属性 典型 的 二 form 二 标签 代码 片段 如 下 所 示 。 


< form action = "http://www. yyy. com/cgi - bin/update"> 


</form> 

cgi-bin 目录 中 的 文档 实际 上 是 一 个 应 用 程序 ,每 次 调用 它 时 该 程序 都 会 动态 地 创建 
一 个 所 需要 的 页 面 
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(2) method 属性 

method 属性 用 于 规定 使 用 何 种 方法 发 送 表单 数据 ,共有 两 种 方法 POST 方法 和 
GET 方法 。 

(3) id 属性 和 name 属性 

id 属性 允许 用 户 使 用 一 个 唯一 的 字符 串 来 标记 控件 ,这 样 程序 或 者 超 链接 就 可 以 直 
接 引 用 它们 。name 属性 就 是 控件 的 名 称 , 可 以 重复 。 


2. 一 input 一 标签 


二 input 之 标签 用 于 定义 表单 控件 ,根据 不 同 type 的 属性 值 , 输 入 字段 拥有 很 多 种 形 
式 ( 文 本 字段 、 复 选 框 、. 掩 码 后 的 文本 控件 . 单 选 按钮 和 按钮 等 )。 虽 然 二 input 之 标签 中 有 
许多 属性 ,但 对 每 个 元 素来 说 ,只 有 type 和 name 属性 是 必须 的 。 一 input 二 标签 中 type 
属性 用 来 选择 控件 类 型 ,name 属性 用 来 为 字段 命名 。 以 下 是 type 属性 常见 值 的 含义 。 

(1) type 二 "text" 单 行文 本 输入 框 

文本 框 是 一 种 让 访问 者 自己 输入 内 容 的 表单 对 象 ,通常 用 来 填写 用 户 名 以 及 简单 的 
回答 ,如 图 2-35 所 示 。 

(2) type="password" %13 ff AHE 

当 用 户 在 此 类 型 的 输入 框 中 输入 任何 文字 时 ,文字 会 被 <。” 代 蔡 , 从 而 起 到 保密 的 作 
用 ,如 图 2-36 所 示 。 

(3) type="checkbox" S HHE 

复 选 框 控件 为 用 户 提供 了 一 种 在 表单 中 选择 或 取消 选择 某 个 条 目的 快捷 方法 。 复 选 杠 
可 以 集中 在 一 起 产生 一 组 选择 ,用 户 可 以 选择 或 取消 选择 组 中 的 每 个 选项 ,如 图 2-37 所 示 。 


C AMIE - Vindo... EBR) A 回回 ` ABS - wina... DOR 


OO [Er BARER N g€ : GO [e rumnmsrsvs v 


XO MD FEV BRR” XPO RAO FEV KRR” XD MED FEV KEA” 
TERR Ermm KERR GERMS 


RFNA y ] ee 


[LTU F - ET 


图 2-35 文本 输入 框 图 2-36 ”密码 输入 框 图 2-37 复 选 框 


(4) type="radio" $ t fk 4H 

单 选 按钮 表单 控件 与 复 选 框 的 行为 非常 相似 ,唯一 不 同 的 是 浏览 者 在 待 选项 中 只 能 
选择 其 中 一 个 ,如 图 2-38 所 示 。 

(5) type= "file" íF 

文件 域 主要 用 于 文件 的 上 传 ,如 图 2-39 所 示 。 

(6) type="submit" HE 3g Fk 4H 

表单 中 input 元 素 的 type 属性 可 以 定义 为 提交 按钮 (submit) ,并 且 人 允许 一 个 表单 中 
包含 多 个 提交 按钮 , 它 的 作用 就 是 把 表单 数据 发 送 到 服务 器 。 
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网 页 设计 与 制作 案例 教程 (HTML + CSS + Dreamweaver) 


/无 标题 文 首 - wina... [T 回国 无 标题 文 着 -Wind.… CDR) 


OOQ- Arenaan | ° ORZA 
TEO MOTEVE ZO GRO SEV BRI” 


we ai] 
| 逢 无 和 是 文档 


O- [g reHRSESR 
Ea 

[ —  — (0 
我 的 电脑 mmal 


w 
图 2-38 单 选 按钮 图 2-39 文件 域 


对 于 最 简单 的 提交 按钮 (按钮 不 包含 name 属性 或 value 属性 ) ,浏览 器 将 显示 一 个 长 
方形 按钮 ,上 面 有 默认 标记 submit( 提 交 )。 其 他 情况 下 ,浏览 器 会 在 value 属性 中 设置 文 
本 来 标记 按钮 。 如 果 还 包含 name 属性 , 当 浏览 器 将 表单 信息 发 送 给 服务 器 时 ,会 将 提交 
按钮 的 value 属性 值 添加 到 参数 列表 中 。 


3. <label >R% 


二 label 二 标签 用 于 为 input 元 素 定义 标记 。 虽 然 label 元 素 不 会 向 用 户 呈 现任 何 特 
殊 效果 ,但 用 户 选 择 该 标签 时 ,浏览 器 就 会 自动 将 焦点 转 到 和 标签 相关 的 表单 控件 上 。 此 
bhs <label > PRZE h for 属性 应 当 与 相关 元 素 的 id 属性 相同 。 


4. 一 select 二 标签 


二 select 二 标签 用 于 创建 下 拉 菜 单 或 滚动 列表 。 与 其 他 标签 一 样 ,name 属性 是 必须 
存在 的 。 当 提交 表单 时 ,浏览 器 会 提交 选 定 的 项 目 ,或 者 收集 用 逗号 分 隔 的 多 个 选项 ,将 
其 合成 一 个 单独 的 参数 列表 。 此 外 ,用 户 如 果 和 希望 一 次 选择 多 个 选项 , 则 可 以 在 二 select 二 
标签 中 添加 multiple 属性 。 


5. 一 option 二 标签 


过 option 记 标签 可 以 定义 一 个 二 select 二 表单 控件 中 的 每 个 条 目 。 浏 览 器 将 二 option 二 
标签 中 的 内 容 作 为 二 select 二 标签 的 菜单 或 是 滚动 列表 中 的 一 个 元 素 进行 显示 。 

(1) value 属性 

value 属性 可 以 为 每 个 选项 设置 一 个 值 , 当 表单 被 提交 时 这 个 值 将 被 发 送 到 服务 器 
端 。 如 果 没 有 指定 value 属性 , 则 选项 的 值 将 设置 为 二 option 过 标签 中 的 内 容 。 

(2) selected 属性 

默认 设置 下 ,所 有 多 选 的 一 select 标签 中 选项 都 是 未 选中 状态 。 当 所 select 一 标签 中 包 
selected 属性 后 ,就 可 以 实现 选 定 一 个 或 多 个 选项 在 初始 状态 时 就 处 于 被 选中 状态 。 


2.3.6 HTML5 新 增 标签 


由 于 目前 HTML5 还 没有 成 为 W3C 正式 的 推荐 标准 ,很 多 浏览 器 对 其 的 支持 程度 
参差 不 一 ,本 节 仅 介绍 新 增 的 音频 和 视频 标签 ,而 所 演示 的 例子 均 在 Firefox 6 中 预览 。 
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1. 标签 video 


HTML5 视频 标签 video 是 新 增 元 素 之 一 。 之 前 ,大 多 数 网 页 视频 是 通过 插件 (例如 
Flash) 来 显示 的 ,但 插件 运行 太 多 或 插件 本 身 问题 都 容易 引起 浏览 器 的 假死 ,造成 用 户 使 
用 不 便 。 所 以 ,HTML5 视频 标签 video 将 改善 用 户 Web 体验 ,让 用 户 在 轻松 愉快 的 情况 


下 观看 视频 。 


(1) 所 video> 标 签 支持 的 视频 格式 及 浏览 器 兼容 性 
<video> PREFE 3 种 视频 格式 ,在 不 同 的 浏览 器 中 的 兼容 性 见 表 2-2。 


表 2-2 3 种 视频 格式 的 浏览 器 兼容 性 


音频 格式 IE9 Firefox 3. 5 Opera 10. 5 Chrome 10 Safari 3. 0 
Ogg ÍV V ÍV 

MPEG 4 ÍV ÍV V 
WebM ÍV v v 


(2) 二 video 二 标签 的 属性 
<video> PR W R PEIX 2-3。 


R 性 


表 2-3 一 video 二 标签 的 属性 
描 述 


autoplay | 如 果 出 现 该 属性 , 则 视频 在 就 绪 后 马上 播放 


controls | 如 果 出 现 该 属性 , 则 向 用 户 显示 控件 ,比如 播放 ,暂停 和 音量 控件 


height 设置 视频 播放 器 的 高 度 


loop 如 果 出 现 该 属性 , 则 每 当 音 频 结束 时 重新 开始 播放 


preload 


如 果 出 现 该 属性 , 则 视频 在 页 面 加载 时 进行 加 载 ,并 预备 播放 。 如 果 使 用 autoplay, 则 忽 
略 该 属性 


src 要 播放 音频 的 URL 


width 设置 视频 播放 器 的 宽度 


【演练 2-10】 


视频 标签 示例 。 


D 打开 “记事 本 ”程序 ,在 其 中 输入 如 图 2-40 所 示 的 代码 ,并 另存 为 网 页 文档 。 


<!DOCTYPE HTML> 
<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; 
charset=utf-8"> 

<title> 无 标题 文档 </title> 

</head> 


<body> 


<source src="wf.mp4 " type="vi 
对 不 起 ! 您 的 浏览 器 不 支持 videoc 标 签 。 
</body> 

</html> 


图 2-40 ”页面 代码 (9) 
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网 页 设计 与 制作 案例 教程 (HTML+CSSs+Dreamweaver) 


@ 保存 为 网 页 文件 后 通过 不 同 的 浏览 器 解析 ,显示 效果 如 图 2-41 和 图 2-42 所 示 。 


C 无 标题 文 着 - Windows Internet Ez... ESR) 无 标题 文档 - x. 

JE P r ansscan mlx] [/ XD SSO ZEV FLO HO 工具 四 
XPD MEO FEV mao IAD #P >» 无 标本 文档 | 

cj 图 -三 


= Q ° 
对 不 起 ! 您 的 浏览 器 不 支持 video 标 签 。 ik = 
| 


TUER ETREX a- 


图 2-41 IE 8 预览 时 的 video 元素 页 面 效 果 图 2-42 Firefox 6 预览 时 的 video 元 素 网 页 效果 


本 例 中 ,controls 属性 提供 了 播放 .暂停 和 音量 控件 ,方便 用 户 对 视频 进行 控制 ; 
width 属性 和 height 属性 ,定义 了 视频 显示 的 范围 ; 过 video 之 标签 中 的 文字 内 容 用 于 在 
不 支持 video 元 素 的 浏览 器 中 进行 显示 ; 所 video 二 标签 中 包含 多 个 source 元 素 ,其 目的 
在 于 方便 浏览 器 选择 一 个 可 识别 的 视频 格式 。 

2. 音频 标签 audio 

HTML5 规定 了 一 种 通过 audio 元 素来 包含 音频 的 标准 方法 ,与 video 元 素 类 似 ， 
audio 元 素 能 够 播放 声音 文件 或 者 音频 流 。 

A) 一 audio 二 标签 支持 的 音频 格式 及 浏览 器 兼容 性 

<audio> PRE LFF 3 种 音频 格式 ,在 不 同 的 浏览 器 中 的 兼容 性 见 表 2-4。 

表 2-4 3 种 音频 格式 的 浏览 器 兼容 性 


音频 格式 IE9 Firefox 3. 5 Opera 10. 5 Chrome 10 Safari 3. 0 
Ogg Vorbis ~ of ~ 
MP3 ~ V V 
WAV ÍV V V 


(2) <audio> PR% KY Jš PE 
<audio> bF 3 JR EIK 2-5. 
R 2-5 一 audio 二 标签 的 属性 


属 性 描 述 

autoplay 如 果 出 现 该 属性 , 则 音频 在 就 绪 后 马上 播放 

controls 如 果 出 现 该 属性 , 则 向 用 户 显示 控件 ,比如 播放 ,暂停 和 音量 控件 
loop 如 果 出 现 该 属性 , 则 每 当 音频 结束 时 重新 开始 播放 

preload 如 果 出 现 该 属性 , 则 音频 在 页 面 加 载 时 进行 加 载 ,并 预备 播放 
sre 要 播放 音频 的 URL 
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【演练 2-11】 音频 标签 示例 。 
O 打开 “记事 本 ”程序 ,在 其 中 输入 如 图 2-43 所 示 的 代码 ,并 另存 为 网 页 文档 。 


<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; 
charset=utf-8"> 
<title> 无 标题 文档 </title> 
</head> 
<body> 
<audio controls="controls"> 
<source src="dx.ogg"type="audio/ogg"> 
<source src="dx.mp3"type="audio/mp3"> 
对 不 起 ! 您 的 浏览 器 不 支持 audio 标 签 。 </audio> 
</body> 
</html> 


图 2-43 页 面 代码 (10) 


© 保存 为 网 页 文件 后 通过 不 同 的 浏览 器 解析 ,显示 效果 如 图 2-44 和 图 2-45 所 示 。 

本 例 中 ,直接 使 用 audio 元 素 将 音频 添加 到 HTML 代码 中 , 它 将 使 用 src 特性 指定 
要 播放 的 音频 文件 ,并 使 用 controls 特性 以 使 用 内 置 的 播放 器 控件 ,由 于 使 用 的 是 内 部 播 
放 器 ,所 以 在 不 同 浏览 器 内 部 预览 的 样式 或 功能 上 有 所 不 同 。 


C KAMSI - Windows Internet E... EBR) 
OO [e runpmsicevn N] tx] |/ 
XED RED SEV RAW IAD WN” 
ARER 站 无 标题 文档 a- 


) 无 标题 文档 - Nozilla Firefox DER 
文件 办 SO SEV FLO H29 IAM 
pa neal 


对 不 起 | 您 的 浏览 器 不 支持 andio 标 答 。 €> woi 


2-44 IE 8 预览 时 的 audio 元 素 页 面 效 果 2-45 Firefox 6 预览 时 的 audio 元 素 网 页 效果 


24 简单 实例 


本 节 主 要 讲解 在 “记事 本 ”环境 下 创建 ,修改 和 预览 网 页 文档 的 全 部 过 程 ,其 目的 在 于 
让 读者 掌握 常见 标签 的 使 用 方法 。 


2.4.1 创建 和 保存 网 页 
专业 的 Web 开发 者 常用 Dreamweaver 这 样 的 软件 编辑 网 页 ,这 也 是 本 书 所 讲授 的 


重点 之 一 ,但 在 本 章 中 为 了 更 好 地 理解 HTML, 这 里 使 用 最 简单 的 工具 一 一 记事 本 来 创 
建 网 页 。 
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网 页 设计 与 制作 案例 教程 (HTML+CSSs+Dreamweaver) 


D 在 计算 机 系统 中 ,执行 “开始 ”一 “所 有 程序 ”附件 ”记事 本 ”命令 ,打开 记 
事 本 。 

O 创建 网 页 。 按 照 之 前 所 讲 的 HTML 规则 ,在 “记事 本 ”窗口 中 输入 相关 内 容 , 如 
图 2-46 所 示 。 


Ë ayfirstpage.htal - 记事 本 

XED SAD ELO SEV WOO 

spocTYPE HTML PUBLIC “-//W3C//DTD HTML 5.01 Transitional//EN" 
“http://wuw.u3.orq/TR/htmlh/loose.dtd"> 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/htnl; charset=utf-8"> 
<title> 龙 年 大 吉 </title> 

/head> 


body> 
<table width-"900" border="1"> 
<tr> 


r. 
<td width="900" height-"267"><ing src-"top.jpg" width-“900' height="267"></td> 
gu 


kw: 入 化 的 uy 0A 不 
iek roas ri i PRE a AXN i 
isi Nusa s eu Capa peli fy 
Pe A PE 
£ Haa A z A STE i Ey e ae 


pA pos 


pez 


2-46 在 “记事 本 ”中 输入 HTML 语言 


O 保存 网 页 。 在 记事 本 的 菜单 栏 中 ,执行 “文件 ”>“ 保 存 " 命 令 , 此 时 弹出 “另存 为 ” 
对 话 框 。 在 该 对 话 框 的 “保存 在 "下拉 列 表 框 中 选择 文件 存放 的 路 径 ; 在 “文件 名 ”文本 框 
中 输入 扩展 名 . html, 这 里 输入 “myfirstpage. html”; 在 “保存 类 型 ?下 拉 菜 单 中 选择 “文本 
文档 ”, 最 后 单 击 “保存 ?按钮 即 可 。 

需要 说 明 的 是 ,在 保存 HTML 文件 时 , 既 可 以 使 用 *. htm” 也 可 以 使 用 *. html” 扩 展 名 ， 
这 是 因为 过 去 很 多 软件 只 允许 三 个 字母 的 文件 扩展 名 ,而 现在 使 用 *. html” 完 全 没有 问题 。 


2.4.2 预览 网 页 


Web 浏览 器 的 作用 是 读 取 HTML 文档 ,并 以 网 页 的 形式 显示 出 它们 ,浏览 器 不 会 显 
示 HTML 标签 ,而 是 使 用 标签 来 解释 页 面 的 内 容 。 具 体操 作 如 下 : 

O 启动 Internet Explorer 浏览 器 。 

@ 执行 浏览 器 菜单 栏 中 的 “文件 ”一 “打开” 命令 ,弹出 “打开 ”对 话 框 ,如 图 2-47 
所 示 。 

© 单 击 “浏览 ?按钮 ,在 打开 的 对 话 框 中 找到 刚 CO 


才 保存 的 “myfirstpage. html” 文 件 。 在 “打开 ”对 话 框 | aro A s 
中 , 单 击 “ 确 定 ” 按 钮 , 即 可 看 到 网 页 效果 ,如 图 248 所 EE 
示 。 预 览 后 如 果 有 需要 修改 的 地 方 ,还 可 以 在 “记事 = m 
本 ”中 打开 该 , html 文件 进行 修改 。 a 
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O [e r HREL SENAR 01 — AREER a 5 FERM V ++ X | 
RERA xwrw -D 本 @- mv- 220- IRo- @- 


生肖 龙 的 象征 意义 


龙 ， 作 为 我 们 中 国人 独特 的 一 种 文化 的 凝聚 和 积淀 ， 已 扎根 和 深 藏 于 我 们 每 人 人 的 潜意识 里 头 ， 不 但 人 们 的 日 TER: 生老病死 
几乎 都 有 打上 龙 文化 的 娩 印 ， 而 且 龙 文化 的 视角 ， 龙 文化 的 审美 音 识 己 渗透 入 了 我 国 社会 文化 的 各 个 领域 、 各 个 方面 


龙 在 中 国 传统 文化 中 是 权势 、 高 责 、 草 荣 的 象征 ， 又 是 幸运 和 成 功 的 标志 。 


eu t phuyip t—2q 是 与 传说 及 神话 中 龙 在 天 则 由 云 驾 去 .下海 则 这 波 还 浪 、 区 
但 更 重要 的 f. iny ki- 13 SEREEN, Ea 是 皇权 的 代名词 因此 ， 
Ps "KA; RRF SHENA: a3 , ROF. au 和 

事物 均 冠 以 " 龙 " TERRE LHW, 


2-48 在 Internet Explorer 浏览 器 中 预览 网 页 


至 此 ,使 用 “记事 本 ”创建 并 保存 一 个 简单 的 网 页 过 程 已 经 介绍 完了 ,读者 在 制作 本 案 
例 过 程 中 ,可 能 觉得 使 用 “记事 本 ”编写 网 页 十 分 枯燥 也 容易 出 错 , 那 么 有 没有 其 他 更 直 
观 、 更 方便 的 方法 制作 网 页 呢 ? 回答 是 肯定 的 , 本 书后 续 章节 将 着 重 讲解 使 用 
Dreamweaver CS5 制作 网 页 的 方法 ,以 及 结合 CSS 的 内 容 美化 网 页 ,而 在 本 节 的 操作 过 
程 仅 是 希望 读者 能 够 掌握 有 关 HTML 语言 的 基本 规则 ,牢记 相关 标签 的 含义 。 


25 = 训 


1. 具体 要 求 


根据 本 章 所 学 内 容 , 使 用 “记事 本 ”创建 一 个 简单 的 网 页 。 在 制作 过 程 中 ,要 求 加 深 对 
HTML 语言 的 理解 ,熟练 掌握 常用 标签 的 含义 。 


2. 制作 思路 


D 执行 “开始 ”>“ 所 有 程序 >“ 附件 ”一 “记事 本 ”命令 ,打开 记事 本 。 

© 在 “记事 本 "窗口 中 插入 段落 和 表单 元 素 ,并且 在 表单 内 部 插入 单 选 按钮 、 复 选 框 、 
单行 文本 框 、 多 行文 本 框 等 标签 ,由 于 涉及 标签 较 多 ,更 为 细致 的 页 面 结构 读者 可 以 参阅 
源 文件 。 

@ 丰富 完善 各 种 标签 内 部 的 文字 内 容 , 并 保存 文件 。 通 过 浏览 器 预览 可 以 看 到 效 
果 , 如 图 2-49 所 示 。 
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OO [e rumtimsrevnm-=smipgpujvaoiR v o x | 
xD SBD FEV RAO IAV #hbQ 
kez sm ü- D-8- mv- 220- IRO- @- 


个 人 基金 投资 者 投资 情况 调查 问卷 

(1) 您 和 择 投 资 公 基 基 全 的 主要 原因 是 ， ( ) 

O 人 大 运 作 管理 规范 、 信 息 技 赴 全 面 ， 可 以 方便 地 坦 技 相关 信息 ， 申 购 、 赎 回 等 均 很 便利 
O 公 到 基金 有 比较 强大 的 投 研 团队 

O 公 至 基 多 投资 门 居 较 低 ， 对 投资 者 没有 太 多 的 资质 及 投资 金 儿 要求 

(D 您 选择 投资 专 户 一 对 多 基金 的 主要 原因 是 ，( ) 


O 专 户 一 对 多 基金 管理 规范 ， 同 公 碍 基金 一 样 有 比较 强大 的 投 研 团队 ， 且 投资 范围 、 投资 比例 较 自 由 
© x... 对 多 产品 相对 于 公募 基金 有 更 强 的 针对 性 ， 可 以 更 好 地 满足 投资 者 要 求 


(3) 您 可 望 获 得 哪 方面 的 讯息 7 《多 选 题 ) 
= ranns 
日 Pr 


D 购买 渠道 
ORRE 


如 您 希望 获得 抽奖 机 会 ， 请 留 下 如 下 信息 


图 2-49 预览 效果 (10) 


26 7J 题 


什么 是 表单 ? 列举 常见 的 表单 对 象 。 
. HTML 中 的 标签 类 型 是 否 被 所 有 浏览 器 所 支持 ? 
分 别 使 用 HTML5 的 音频 和 视频 标签 制作 简易 页 面 。 
8. 使 用 列表 标签 制作 如 图 2-50 所 示 的 网 页 。 
9. 使 用 表格 标签 和 图 像 标签 制作 如 图 2-51 所 示 的 
网 页 。 
10. 使 用 表格 和 图 片 制 作 如 图 2-52 所 示 的 页 面 。 
11. 使 用 表单 制作 登录 框 页 面 ,如 图 2-53 所 示 。 图 2-50 习题 8 对 应 图 


1. 什么 是 HTML? 什么 是 XHTML? 什么 是 HTML5? 它们 之 间 有 什么 联系 ? 
2. 什么 是 标签 ? 5 习题 - windows 1... EJER) 
3. R XHTML 的 语法 规则 。 GO Bremer 
4. 超 链接 标签 内 部 能 否 插入 图 像 标 签 ? — 
5. 列表 标签 包括 哪 几 类 ? 

6. 

$. 
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(Fl - Windows Internet Explorer 


P F:\ 数 材 辆 写 汇总 \ 网 页 一 一 三 记 客 \ 配 套 素 村 \ehnz\ v +> X | 上/ 


文件 到) SED SEV RERW IAV #BbQD 
keez sm A-D 2 e- TEO- 2207 I0- @- 


侯 卫 东 官 场 笔记 5〈 哪 些 人 脉 救 
《 花 格子 大 象 艾 玛 》 全 10 册 命 ? 哪些 人 脉 要命 ? ERVA 

县 、 市、 省 官场 现状 ! ) 
定价 ， 闻 80. 00 


当前 价 ， 竺 47. 20 k rtt. Y29.80 

Stift: Y18.40 
WA: AE- (FFRAN 李 可 乐 抗 拆 记 (李承鹏 最 新 力作 | 
人 中 加 第 一 以 拆 还 为 是 和 的 文学 作 
? 品 ! 


定价 ， 半 28. 00 定价 ， 丫 28. 00 
当前 价 ， 闻 17. 30 当前 价 ， 闻 17. 30 


a= 


图 2-51 习题 9 对 应 图 


D 汽车 壁纸 最 新 更 新 超级 跑车 > 汽车 世界 


保 时 沌 跑车 旧 面 壁纸 


精美 宝马 汽车 宽屏 壁纸 兰博基尼 高 清 壁 纸 


帕 加 尼 husayrs 壁 纸 


图 2-52 习题 10 对 应 图 


用 户 名 
EB 
i] FE] 
注册 新 用 户 E T 


图 2-53 习题 11 对 应 图 
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第 3 章 ” ”CSS 语言 基础 


口 了 解 CSS 的 相关 知识 。 
口 掌握 CSS 基本 语法 。 
口 能 够 使 用 “(X)HTML 十 CSS” 创 建 简单 网 页 。 


CSS 是 一 种 表现 (Presentation) 语 言 ,用 来 格式 化 网 页 、 控 制 字 体 、 布 局 和 颜色 等 。 
CSS 扩展 了 HTML 的 功能 , 减 小 了 网 页 的 存储 空间 ,加 快 了 网 络 传送 速度 ,也 大 大 简化 
了 网 页 格式 化 工作 的 强度 。 


31 CSS 语言 概述 


在 “表现 与 结构 相 分 离 * 这 一 Web 理念 盛行 的 大 环境 中 ,CSS 语言 可 以 将 样式 信息 与 
网 页 内 容 分 离开 来 ,使 站 点 外 观 维护 变 得 更 为 简便 ,而 且 还 可 以 使 (X)HTML 文档 代码 
结构 清晰 内 容 简练 。 


3.1.1 CSS 概述 


1. 什么 是 CSS 


CSS(Cascading Style Sheet, HARK) E&H W3C( 万 维 网 联盟 ) 的 CSS 工作 组 创 
建 和 维护 的 。 它 是 一 种 不 需要 编译 ,可 直接 由 浏览 器 执行 的 标记 性 语言 ,用 于 控制 Web 
页 面 的 外 观 。 通 过 使 用 CSS 样式 控制 页 面 各 元 素 的 属性 显示 ,可 将 页 面 的 内 容 与 表现 形 
式 进行 分 离 。 

目前 CSS 有 多 种 版 本 ,CSS 1 是 1996 年 W3C 的 一 个 正式 规范 ,其 中 包含 最 基本 的 属 
性 (如 字体 、 颜 色 和 空白 边 )。CSS 2 是 在 CSS 1 的 基础 上 增添 了 某 些 高 级 概念 (如 浮动 和 
定位 ) 以 及 高 级 的 选择 器 (如 子 选择 器 、 相 邻 同 胞 选择 器 和 通用 选择 器 ) ,并 于 1998 年 作为 
正式 规范 发 布 的 。 

尽管 CSS 3 的 开发 工作 很 早 就 开始 了 ,但 至 今 尚未 正式 发 布 , 目 前 仅 是 草案 。 不 过 
CSS 3 的 新 功能 ( 圆 角 、 多 背景 .用户 自 定义 字体 \ 动 画 与 渐变 、 渐 变色 、 盒 阴影 .透明 色 文 
字 阴 影 等 ) ,还 是 让 众多 设计 人 员 备 受 期 待 , 它 能 让 代码 更 为 简洁 ,页 面 结构 更 合理 ,性 能 
和 效果 得 到 兼顾 。 


第 3 章 CSS 语言 基础 


可 能 是 考虑 到 CSS 2 到 CSS 3 的 发 布 时 间 会 很 长 ,2002 年 人 们 启动 了 CSS 2. 1 的 开 
发 , 它 是 CSS 2 的 修正 版 ,纠正 了 之 前 版 本 的 一 些 错误 ,并 更 精确 地 描述 CSS 的 浏览 器 实 
现 。 本 书 所 涉及 的 CSS 均 使 用 CSS 2. 1 版 本 。 


2. 体验 CSS 


同一 个 网 页 文档 可 以 有 巨大 的 外 观 差异 ,如 图 3-1 和 图 3-2 所 示 , 这 就 是 CSS 的 强大 之 
处 。 读 者 可 以 访问 一 个 名 为 “CSS 禅 意 花园 ”的 网 站 (http://www. csszengarden. com/ ) 亲 身 
体验 。 


TKR) Ti Eliaan a 

“< n Z l = 3 

图 3-1 CSS 禅 意 花 园 页 面 (1) 图 3-2 CSS 禅 意 花园 页 面 (2) 
3. CSS 的 优势 


为 了 简化 和 整理 页 面 制作 过 程 中 那些 繁 元 以 及 杂乱 无 章 的 HTML 代码 ,CSS 在 
W3C 工作 组 的 努力 下 被 开发 出 来 ,有 效 地 解决 了 这 些 烦琐 的 问题 ,其 优势 表现 在 以 下 几 
个 方面 。 

(1) 避免 使 用 不 必要 的 XHTML 元 素 

XHTML 标签 本 意 是 用 来 定义 文档 结构 的 ,通过 二 hl 二 .二 p 二 二 table 二 等 各 种 标 
签 ,表达 标题 .段落 和 表格 之 类 的 信息 。 

CSS 样式 可 以 代替 HTML 中 原本 用 于 表现 形式 的 标签 ,使 得 语义 化 标签 处 于 更 好 
的 位 置 , 更 能 发 挥 文档 标签 规范 文档 结构 的 作用 。 
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(2) 缩短 更 新 和 维护 的 时 间 

CSS 可 以 将 多 个 页 面 同 时 更 新 来 实现 样式 及 布局 的 变化 ,设计 者 只 需要 修改 CSS 文 
件 中 的 某 些 属性 ,整个 站 点 的 外 观 就 会 随 之 改变 ,大 幅 提升 了 开发 和 维护 过 程 的 效率 。 一 
般 来 说 ,CSS 样式 文件 存放 于 独立 的 文件 中 ,或 者 包含 在 一 style> 委 /style> 标 签 中 。 

(3) 减少 服务 器 和 带宽 的 费用 ,以 节约 资金 

使 用 CSS 替换 过 时 的 二 font 二 标签 ,优化 页 面 结构 ,可 以 使 页 面体 积 减 小 ,这 对 于 一 
个 每 日 访问 量 巨大 的 站 点 来 说 ,可 以 有 效 节约 带宽 ,减轻 服务 器 的 压力 ,进而 节约 资金 。 


3.1.2 CSS 规则 


CSS 规则 由 两 部 分 组 成 : 选择 符 (selector) 和 声明 (declaration) , 而 声明 又 由 属性 及 
其 对 应 的 值 组 成 ,如 图 3-3 所 示 。 选择 符 声明 

选择 符 可 包含 一 种 或 多 种 属性 ,其 作用 是 决定 网 页 上 的 哪 = Ei a 
一 部 分 应 该 样式 化 ; 属性 告诉 浏览 器 要 改变 什么 ; 属性 的 值 告 Cel seo) 
诉 浏览 器 要 改变 成 什么 。 属性 i 

+ 选择 符 : 规则 中 用 于 选择 文档 中 要 应 用 样式 的 那些 元 。 图 33 CSS 规 则 
素 。 该 元 素 可 以 是 (X)HTML 的 某 个 标签 (如 本 例 中 二 h2 二 标签 被 选中 ), 也 可 
以 是 页 面 中 指定 的 class( 类 ) 或 者 id 属性 限定 的 标记 。 

。 声明 : 包含 在 一 对 大 括号 “()” 内 ,用 于 告诉 浏览 器 如 何 演 染 页 面 中 与 选择 符 相 匹 
配 的 对 象 。 声 明 内 部 由 属性 及 其 属性 值 组 成 ,并 用 冒号 隔 开 ,以 分 号 结束 ,声明 的 
形式 可 以 是 一 个 或 者 多 个 属性 的 组 合 。 

4 属性 (property): 由 官方 CSS 规范 约定 ,而 不 是 自 定义 的 , 除 个 别 浏览 器 私有 
属性 以 外 。 

4 属性 值 Cvalue) : 放置 在 属性 名 和 冒号 后 面 , 其 具体 内 容 跟 随 属性 的 类 别 呈 现 不 
同形 式 ,一 般 包括 数值 .单位 以 及 关键 字 。 

【演练 3-1】 CSS 规则 示例 。 

D 打开 “记事 本 "程序 ,按照 HTML 文档 的 基本 结构 在 其 body 元 素 内 部 输入 如 图 3-4 

所 示 的 代码 。 
© 在 页 面 head 元 素 内 部 ,创建 如 图 3-5 所 示 的 代码 ,并 另存 为 网 页 文档 。 


<style type="text/css"> 
body { 
Eont-fami1y:" 微 软 雅 黑 "; ”/* 设 置 字体 */ 
font-size:l6px; /* 设 置 文 字 大 小 为 13px*/ 
background-color: #FF0; /* 设 置 背 景 颜色 为 黄色 */ 


hl ( 
color:#F00;/* 设 置 颜色 为 红色 */ 
<body> } 


<h1>css 基 本 语法 </h1> pi 
<p>cSS 规 则 由 两 部 分 组 成 : 选择 符 〈selectoz) 和 声明 color:#00F; /* 设 置 字体 颜色 为 蓝 色 */ 
(declaration) ， 而 声明 又 由 属性 及 其 对 应 的 值 组 成 。</p> } 
</body> </style> 
图 3-4 页 面 代码 (1) 3-5 ”CSS 代码 (1) 
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@ 打开 浏览 器 预览 刚才 制作 的 网 页 文档 ,其 效果 如 图 3-6 所 示 。 
回回 


GO- reuse 加 |+|x| [P 
xí) SED SEV KRW IAV HHW 


CSS 基 本 语法 


CSS 规 则 由 两 部 分 组 成 : 选择 符 ( selector ) 和 声明 ( declaration ) ， 而 声明 又 
由 属性 及 其 对 应 的 值 组 成 。 


图 3-6 ”最 终 预览 效果 (1) 


通过 本 例 可 以 看 出 ,页 面 结构 代码 十 分 清晰 ,并 没有 混杂 外 观 样式 ,而 所 有 外 观 全 部 
通过 CSS 进行 控制 ,这 充分 体现 了 “表现 与 结构 相 分 离 ” 这 一 Web 理念 。 在 实际 工作 中 ， 
符合 Web 标准 的 网 页 制作 并 非 如 此 简单 ,还 有 更 为 复杂 的 知识 等 待 读者 学 习 。 


3.1.3 CSS 的 命名 规则 


在 工作 中 ,要 完成 一 个 项 目 通常 以 多 人 合作 的 方式 进行 ,如 果 没 有 规范 化 命名 , 则 合 
作 伙伴 之 间 很 难看 懂 代 码 ,大 大 降低 了 工作 效率 。 为 了 增强 代码 的 可 读 性 ,规范 化 的 命名 
十 分 必要 。 

CSS 命名 规则 和 其 他 的 程序 命名 差不多 ,主要 包含 三 种 : 骆驼 命名 法 、 帕 斯 卡 命名 法 
和 匈牙利 命名 法 。 

(1) 骆驼 命名 法 

骆驼 命名 法 指 的 是 第 一 个 字母 小 写 ,后 面 单词 的 第 一 个 字母 就 要 用 大 写 ,例如 
# headerBlock #l # navMenuRedButton, 

(2) 帕斯卡 命名 法 

帕斯卡 命名 法 同样 也 是 大 小 写字 母 混 编 而 成 的 ,只 是 首 字母 要 大 写 , 例如 
# HeaderBlock #ll # NavMenuRedButton。 

(3) 匈牙利 命名 法 

匈牙利 命名 法 指 的 是 在 名 称 前 面 加 上 一 个 或 多 个 小 写字 母 作为 前 级 ,让 名 称 更 加 容 
易 理 解 ,例如 #head_navigation #ll # red_navMenuButton。 

以 上 三 种 命名 方法 都 比较 常用 ,其 实 读者 在 实际 工作 中 并 不 需要 强调 使 用 的 是 哪 种 
命名 方法 ,只 需要 注意 “容易 理解 ,方便 协同 工作 ”这 个 原则 即 可 。 

此 外 ,在 规划 整体 页 面 布 局 时 各 板块 区 域 也 有 通用 的 命名 规则 , 详 见 表 3-1。 
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表 3-1 页 面 布局 时 通用 的 命名 规则 


容器 wrapper/container RE logo 

页 头 header 告 banner 

内 容 content/container 登录 login 
页 面 结构 类 | 页 面 主体 main 搜索 search 

页 尾 footer 注册 regsiter 

侧 栏 sidebar 文章 列表 list 

栏目 column 功能 类 图 标 icon 

导航 nav 服务 service 

主导 航 mainnbav 热点 hot 

子 导航 subnav 新 闻 news 
导航 类 菜单 menu 下 载 download 

标题 title 友情 链接 link 

摘要 summary 版 权 copyright 


32 CSS 与 HM 文档 的 结合 方法 


CSS 控制 网 页 内 容 显示 格式 的 方式 是 通过 许多 定义 的 样式 属性 (如 : 字号 、 段 落 控 制 
等 ) 实 现 的 ,并 将 多 个 样式 属性 定义 为 一 组 可 供 调用 的 选择 符 (Selector) 。 其 实 , 选 择 符 就 
是 某 一 个 样式 的 名 称 , 称 为 选择 符 的 原因 是 , 当 HTML 文档 中 某 元 素 要 使 用 该 样式 时 ， 
必须 利用 该 名 称 来 选择 样式 。 

要 想 在 浏览 器 中 显示 出 样式 表 的 效果 ,就 要 让 浏览 器 识别 并 调用 。 当 浏览 器 读 取样 
式 表 时 ,要 依照 文本 格式 来 读 。 为 了 让 读者 了 解 CSS 与 HTML 文档 的 结合 方法 ,这 里 简 
要 讲解 4 种 在 页 面 中 插入 样式 表 的 方法 ,更 为 详细 的 内 容 将 结合 Dreamweaver CS5 的 内 
容 在 第 4 章 向 读者 讲解 。 


1. 内 联 样式 


内 联 样式 是 指 在 HTML 标签 中 插入 style 属性 ,再 定义 要 显示 的 样式 表 , 而 style 属 
性 的 内 容 就 是 CSS 的 属性 和 值 。 其 格式 为 


< 标签 style= "属性 :属性 值 ; 属性 :属性 值 …"> 


【演练 3-2】 CSS 与 HTML 文档 的 结合 方法 一 一 内 联 样式 。 

D 打开 “记事 本 ”程序 ,在 其 中 输入 如 图 3-7 所 示 的 代码 ,并 另存 为 网 页 文档 。 

@ 打开 浏览 器 预览 刚才 制作 的 网 页 文档 ,其 效果 如 图 3-8 所 示 。 

© 使 用 “记事 本 ”程序 再 次 打开 刚才 创建 网 页 文档 ,向 其 中 增加 内 联 样式 。 这 里 拟 将 
标题 中 * 内 联 ? 两 字体 字号 变 大 ,段落 内 容 改变 颜色 ,具体 的 修改 内 容 如 图 3-9 所 示 。 

@ 保存 修改 后 的 网 页 文档 ,通过 浏览 器 预览 即 可 看 到 效果 如 图 3-10 所 示 。 
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<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www. w3. org/TR/html4/loose. dtd"> 

<html> 

<head> 

<meta http-equiv="Content-Type”" content="text/html; charset=utf-8"> 
<tit1le> 内 联 样式 </title> 

</head> 


<body> 

<h2>Cs8 与 HTMI 文 档 的 结合 方 注 一 一 内 联 样式 </h2> 

<p> 内 联 样式 是 指 在 HTML 标 签 中 插入 style 属 性 ， 再 定义 要 显示 的 样式 表 ， 而 style 属 性 
的 内 容 就 是 css 的 属性 和 值 。</ p> 

</body> 

</html> 


图 3-7 页 面 代码 (2) 


C 内 联 样式 - Windows Internet Explorer 


TN [Ç 
回回 [e riniGscsunv o [P 
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CSS 与 HITML 文档 的 结合 方法 一 一 内 联 样式 


内 联 样式 是 指 在 HTML 标 签 中 插入 sbyie 属 性 ， 再 定义 要 显示 的 样式 
表 ， 而 style 属 性 的 内 容 就 是 CSS 的 属性 和 值 。 


PES 
3-8 未 增加 内 联 样式 时 预览 的 效果 


增加 的 内 联 样式 


<body> S 


<h2>C8s 与 HTML 文 1 方法 一 <span style="font-: “Size 40px; "> 内 联 </span> 样 式 </h2> 
<p style="color;#F00; “> 内 联 样式 是 指 在 HTMI 标 符 中 手 和 style 所 性 ， 再 定义 要 显示 

的 样式 表 ， 而 style 属 性 的 内 容 就 是 css 的 属性 和 值 。</ p> 

</body> 


3-9 ”为 页 面 增加 内 联 样式 


广内 联 样式 - Windows Internet Explorer 


J [e r AmMGSCSV v o Xx | 上 
TERR EARNE -D Oe- mmn- 


Css 与 HTMI 文 档 的 结合 方法 一 内 联 样式 


内 联 样式 是 指 在 HTML 标 签 中 插入 style 属 性 ， 再 定义 要 显示 的 样式 表 ， 而 
stye 属 性 的 内 容 就 是 CSS 的 属性 和 值 


PES se Rios ~ 


图 3-10 增加 内 联 样式 后 预览 的 效果 


2. 内 部 样式 
内 部 样式 表 是 指 把 样式 表 放 到 页 面 的 二 head>.… 到 /head> 区 内 ,样式 规则 仅 对 当前 
页 面 有 效 。 内 部 样式 表 的 格式 为 


< style type = "text/css"> 
<! -- 
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选择 符 1{ 属 性 :属性 值 ; 属性 :属性 值 …} /* 注释 内 容 */ 
选择 符 2{ 属 性 :属性 值 ; 属性 :属性 值 …} 


选择 符 n{ 属 性 :属性 值 ; 属性 :属性 值 …} 
--> 
</style> 


<style>... </style> PR XJ HK Bš BH EE NWIPE, type 属性 指定 style 使 用 
CSS 的 语法 来 定义 。 当 然 , 也 可 以 指定 使 用 像 JavaScript 之 类 的 语法 来 定义 。 属 性 和 属 
性 值 之 间 用 冒号 “:” 隔 开 ,定义 之 间 用 分 号 “;” 隔 开 。 

<1--... -- 之 的 作用 是 避免 旧版 本 浏览 器 不 支持 CSS, iE <style>... </style> K A 
容 以 注释 的 形式 表示 ,这样 对 于 不 支持 CSS 的 浏览 器 ,会 自动 略 过 此 段 内 容 。 

选择 符 可 以 使 用 HTML 标签 的 名 称 , 所 有 HTML 标签 都 可 以 作为 CSS 选择 符 
使 用 。 

/* ... * /为 CSS 的 注释 符号 ,主要 用 于 注释 CSS 的 设置 值 。 注 释 内 容 不 会 被 显示 
或 引用 在 网 页 上 。 

【演练 3-3】 CSS 与 HTML 文档 的 结合 方法 一 一 内 部 样式 。 

O 继续 使 用 上 题 中 的 源 代码 进行 讲解 。 打 开 “ 记 事 本 ”程序 ,创建 结构 相同 文字 内 容 
不 用 的 代码 ,具体 内 容 如 图 3-11 所 示 。 


<body> 

<h2>c88 与 HTML 廊 档 的 结合 方法 一 capan> 内 部 </span> 样 式 </h2> 

<p> 内 部 样式 表 是 指 把 样式 表 放 到 页 面 的 head 区 内 ， 梯 式 规则 仅 对 当前 页 面 有 效 。</ p> 
</body> 


3-11 页 面 代 码 (3) 


© 在 当前 页 面 代码 的 head 区 域内 ,根据 内 部 样式 表 的 格式 创建 相关 规则 ,如 图 3-12 
所 示 。 通 过 浏览 器 预览 即 可 看 到 效果 如 图 3-13 所 示 。 


< 1DOCTYPE HTML PUBLIC ”-//W3C//DTD HTML 4.01 Transitional//EN” 
"http://www.w3.org/TR/html4/loose.dtd"> 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
< 让 1e> 内 部 样式 </title> 

<style type="text/css"> 


na 40px 
f 增加 的 内 部 样式 
Color:#F00; EFIA 


</style> 

</head> 

<body> 

<h2>css 与 HTML 文 档 的 结 全 方法 一 <span> 内 部 </span> 样 式 </h2: 

<p> 内 部 样式 表 是 指 把 样式 表 放 到 页 面 的 head 区 内 ， PARNI ANNTA. </p> 
</ bod: 

ieas 


图 3-12 增加 内 部 样式 


3. 外 部 样式 


链 入 外 部 样式 表 就 是 当 浏览 器 读 取 到 HTML 文档 的 样式 表 链 接 标 签 时 ,将 向 所 链 
44 


第 3 章 CSS 语言 基础 


Css 与 HTML 文 档 的 结合 方法 一 内 部 样式 


内 部 样式 表 是 指 把 样式 表 放 到 页 面 的 head 区 内 ， 样 式 规则 仅 对 当前 页 面 有 效 。 


图 3-13 增加 内 部 样式 后 的 预览 效果 


接 的 外 部 样式 表 文 件 索取 样式 ,该 类 样式 的 规则 将 作用 于 整个 站 点 。 
要 想 实现 外 部 样式 与 HTML 文档 的 链接 ,必须 在 网 页 二 head 记 .过 /head 二 标签 对 
内 增加 二 link 二 标签 ,具体 的 格式 如 下 : 


<head> 
i rel = "stylesheet" href = "外 部 样式 表 文 件 名 .css" type="text/css"> 

iais 

HR , <link >R ERR N A 8 MA APB PER KIX. css” 文 件 中 以 文档 格式 读 出 定义 
WFERK., rel="stylesheet" J PEJE X fE R W PAE H F980J FQ K , type =" text/css" JR 
性 定义 文件 的 类 型 为 样式 表 文件 ,href 属性 用 于 定义 . css 文件 的 URL, 

样式 表 文 件 可 以 用 任何 文本 编辑 器 (如 记事 本 ) 打 开 并 编辑 ,一 般 样式 表 文 件 的 扩展 
名 为 . css。 样 式 表 文 件 的 内 容 是 定义 的 样式 表 , 不 包含 HTML 标签 。 


由 于 外 部 样式 在 创建 站 点 初期 能 够 通过 Dreamweaver CS5 自动 添加 到 页 面 内 ,所 以 
添加 和 编辑 外 部 样式 的 案例 内 容 放 在 后 续 章 节 讲解 。 


33 结合 CSS 创 建 简单 网 页 


本 节 主 要 讲解 在 “记事 本 ”环境 下 创建 ,修改 和 预览 网 页 文档 的 全 部 过 程 ,其 目的 在 于 
让 读者 掌握 常见 标签 的 使 用 方法 ,以 及 了 解 CSS 语言 美化 页 面 的 过 程 。 


3.3.1 页 面 布局 分 析 


在 制作 任何 网 页 之 前 需要 清楚 地 了 解 网 页 布局 的 方式 ,这 对 于 后 面 页 面 的 搭建 非常 
重要 。 图 3-14 所 示 的 是 本 例 网 页 制作 的 最 终 效 果 , 对 于 初学 者 来 说 可 以 先 不 考虑 效果 图 
切片 的 问题 ,而 需要 重点 学 习 如 何 合理 地 规划 页 面 , 以 及 对 各 种 标签 的 学 习 。 

从 本 例 的 最 终 效 果 图 中 可 以 发 现 , 主 要 包含 顶部 导航 和 主体 内 容 两 大 部 分 ,考虑 到 对 
页 面 元 素 控制 的 便利 性 ,以 及 整个 页 面 需要 背景 图 像 加 以 衬托 ,这 里 使 用 wrapper 容器 加 
JAR ,最 终 的 示意 图 如 图 3-15 所 示 。 
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网 页 设计 与 制作 案例 教程 (HTML+TCSSs+Dreamweaver) 


天 标 是 六 挡 
OO [EMAER AARNA hl v +> X [P 
xo SaD sao PRAW IRU PBO 

senz grma 


简历 ”优势 技能 
~ ~n  — 


i 
i 
: 


ji 


Ef: 


H! 


毕业 字 校 
KERE : 
专业 方向 : 
联系 方式 ; 


2 


wrapper 
header 
content 

图 3-14 ”最终 预览 效果 (2) 图 3-15 布局 示意 图 (1) 


3.3.2 编写 HTML 文档 


O 搭建 页 面 框架 。 在 计算 机 系统 中 ,打开 “记事 本 ”程序 。 按 照 之 前 所 讲 的 HTML 
规则 ,在 “记事 本 "窗口 中 输入 相关 内 容 , 如 图 3-16 所 示 。 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtm11/DTD/xhtm11-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 无 标题 文档 </title> 

</head> 


<body> 
<div id="wrapper"> 
<div id="header"></div> 
<div id="content"></div> 
</div> 
</body> 
</html> 


图 3-16 搭建 页 面 框架 (1) 


© 在 记事 本 的 菜单 栏 中 ,执行 文件 ”保存 ?命令 ,此 时 弹出 “另存 为 "对话 框 。 在 
该 对 话 框 的 “保存 在 "下拉 列 表 框 中 选择 文件 存放 的 路 径 ; 在 “文件 名 ”文本 框 中 输入 扩展 


46 


第 3 章 css aran] 


名 . html, X E ff À “index. html”; 
“保存 ?按钮 。 


在 “保存 类 型 "下 拉 菜 单 中 选择 “文本 文档 ”, 最 后 单 击 


@ 在 名 为 header 的 容器 内 部 使 用 无 序列 表 插入 一 组 列表 内 容 , 作 为 导航 使 用 ,如 


图 3-17 所 示 。 


© 根据 页 面 效 果 , 在 名 为 content 的 容器 内 部 使 用 <img 二 标签 插入 一 幅 图 像 ,然后 
使 用 段落 标签 和 标题 标签 插入 相关 文字 内 容 , 如 图 3-18 所 示 。 
@ 启动 Internet Explorer 浏览 器 ,打开 刚才 制作 的 网 页 文档 ,此 时 的 页 面 效 果 如 


图 3-19 所 示 。 


<body> 
<div id="wrapper"> 
<div id="header"> 


"#"> 简 历 </a></1i> 
"> 优势 </a></1i> 
<li><a href="#"> 搜 能 </a></1i> 
</ul> 
</div> 
<div id="content"></div> 
</div> 
</body> 


3-17 ”插入 无 序列 表 元 素 制 作 导 航 条 


作业 方向 ， 网 络 工程 <br /> 
联 1234567890<br /> 


e 力 ， 良 好 的 编程 技巧 和 篇 程 风格 :<be /> 
EAE, WS PRE TDED SET: <r /> 
警 于 与 人 沽 通 ， 团 队 合作 精神 强 ，<bxr /> 


3-18 ”插入 页 面 主体 内 容 


3.3.3 美化 与 修改 文档 


Er wnsice'Wm | x / 
Xe RED SEV RRO IRV HU 
RoR @xsmr 2-0 


5 
HERA, 1991 年 11 月 
AR. tat 
mem. ERRA 
学 位 ， 工 程 硕士 


学 历 ， FE 
毕业 学 校 ， 字 泽 科技 学 院 


联系 方式 ，1234567890 


能 力 素质 


1 Fr et 

2 PS KIRdi--css, javascript, xml, jquery，ajax 原 理 

3. 熟练 掌握 XML，HTML，CSS， JnaScript, JSC JSON, jQueryAja 等 Web 页 面 技术 ， 
了 解 页 面 SEO 原理 以 及 应 用 。 


自我 评价 
1 优良 的 深 辑 分 析 及 学 习 能 力 ， 良 好 的 编程 技巧 和 编程 风格 ; 


2 良好 的 执行 力 及 独立 完成 任务 能 力 ， 适 应 快速 成 长 型 团队 的 要 求 ， 
IFM, ER. 责任 心 强 ， 著 于 与 人 沟通 ， 团 队 合作 精神 强 。 


图 3-19 当前 预览 效果 (1) 


通过 上 述 步骤 的 制作 ,读者 可 以 发 现 当前 页 面 的 内 容 已 经 完成 ,但 整体 页 面 效果 非常 
不 美观 ,下 面 主要 介绍 如 何 通 过 CSS 语言 美化 当前 文档 。 
Q@ 再 次 打开 “记事 本 ”程序 ,对 当前 文档 进行 修改 ,这 里 在 HTML 文档 的 head 标签 
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内 部 插入 如 图 3-20 所 示 的 CSS 规则 。 读 者 在 此 环节 不 必 拘 泥 于 每 条 CSS 规则 的 具体 含 
义 , 而 是 要 从 整体 出 发 体会 HTML 与 CSS 之 间 的 关系 ,对 于 CSS 的 具体 内 容 后 续 章 节 陆 
续 讲 解 。 

@ 保存 当前 文档 ,通过 浏览 器 预览 可 以 看 到 效果 ,如 图 3-21 所 示 。 从 图 中 可 以 看 
出 ,当前 页 面 导 航 和 内 容 的 标题 没有 突出 显示 ,下 面 针 对 此 问题 进行 修改 。 


<style type="text/css"> 
.i 


margin:0; 
padding:0; 


) 
body { 
font-family: "ØRER"; 
font-size:14px; 
background: url (images/bg.jpg) 
no-repeat center top; 
j 7* 设 置 背 景 图 像 */ 
#wrapper | 
width: 490px; 
haigne; 900px; 


mar, au! 
1 te / 
#header 
height:s0px; 
padding-top: 60px; 
padding-left:130px; 


) 
4nav ( 1. Biñlinux+nginx/apache+mysql ; 
font-size:30px; 2. BEBSSEEfdiv+ Css , javascript , xml , json , jquery , aj 
3. BSWEEEXML , HTML , CSS , JavaScript , JSON , Ri 
Wav li { , TWESISEOBSRP P SUB. 
display:inline; 
padding:0 25px; 
)⁄*88 R 3X;FFPJRIR AA / 
nav af 
color: #333; 
ont-weight:bolder; 
) "8 RSS A., 
#content | 
padding:15px; 


#content img { 
float:left; 
margin-right :20 
pr“ HENENG, SEPPE / 


#content p 1 
margin-bottom: 15px; 

k Z< EIET 间距 */ 

</style> 
图 3-20 CSS 代码 (2) 图 3-21 当前 预览 效果 (2) 


@ 打开 “记事 本 ”程序 ,在 名 为 nav 的 容器 ,以 及 h2 标签 内 部 增加 CSS 修饰 代码 ,如 
图 3-22 和 图 3-23 所 示 。 


<ul id="nav"> 
<li><a href="#" style="color:#06F;"> 简 历 </a></1i> 
<li><a href="#" style="color:#F60;"> 优 势 </a></1i> 


<li><a href="#" style="color:#90F;"> 技 能 </a></1i> <h2 style="color:#F00; "> 能力 素 质 </h2> 
</ul> <h2 style="color:#F00;"> 自 我 评价 </h2> 
图 3-22 为 导航 条 增加 CSS 样式 图 3-23 为 h2 标签 增加 CSS 样式 


D 再 次 通过 浏览 器 进行 预览 , 即 可 看 到 最 终 效 果 。 

至 此 ,使 用 “记事 本 ”创建 并 保存 一 个 简单 的 网 页 过 程 已 经 介绍 完了 ,通过 本 例 的 练习 
读者 应 该 掌握 有 关 HTML 语言 的 基本 语法 ,以 及 标签 的 使 用 方法 ,更 应 该 体会 到 CSS 在 
美化 页 面 方面 的 重要 性 。 
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1. 具体 要 求 


根据 本 章 所 学 内 容 ,使 用 “记事 本 ”创建 一 个 简单 的 网 页 。 在 制作 过 程 中 ,要 求 加 深 对 
HTML 语言 的 理解 ,熟练 掌握 常用 标签 的 含义 。 实 训 最 终 效果 图 及 其 布局 规划 如 图 3-24 


和 图 3-25 所 示 。 


ARERR xuma 


2. 制作 思路 


》 [E \aoe\RU—— 人 Vinde Mal 
FD MD FEV RWO IAD upo 


图 3-24 最 终 预 览 效 果 (3) 


执行 “开始 ”>“ 所 有 程序 >“ 附件”>“ 记 事 本 ”命令 ,打开 记事 本 。 
© 在 “记事 本 ”窗口 中 首先 创建 页 面 框架 ,如 图 3-26 所 示 。 


wrapper 


leftside 


center 


rightside 


menu 


图 3-25 布局 示意 图 (2) 


<body> 
<div id="wrapper"> 
<div id="leftside"></div> 


</body> 


图 3-26 ”搭建 页 面 框架 (2) 
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@ 分 别 在 各 大 容器 内 部 创建 相关 的 文字 内 容 。 


© 在 页 面 项 部 的 head 区 域 插入 对 应 的 CSS 规则 ,并 保存 文件 。 通 过 浏览 器 预览 可 


以 看 到 效果 。 


1 
2 
3 


4 


35 7J 题 


. 什么 是 CSS? 它 的 优势 主要 体现 在 什么 地 方 ? 
. 简 述 CSS 语言 的 规则 。 


3. 在 创建 CSS 规则 中 ,有 什么 命名 规则 可 以 遵循 ? 
. 制作 如 图 3-27 所 示 的 网 页 ,要 求 一 级 标题 为 h2、 居 中 、 蓝 色 ; 二 级 标题 为 h3、 红 


色 ; 正文 为 “微软 雅 黑 ”黑色 ; 页 面 背 景 为 粉色 。 
5. 使 用 表格 和 图 片 结合 CSS 的 内 容 制作 如 图 3-28 所 示 的 页 面 。 


50 
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Web 标 准 与 理念 


涉及 表现 的 东西 通通 剥 高 出 来 , 


XHTML 的 标签 只 用 来 定义 文档 的 结构 ， 所 有 
把 它 放 到 一 个 单独 的 文件 里 ， 这 个 单独 的 文件 就 是 CSS。 


[图 解 ] 中 华 \5 


[ 实 拍 ] 工 驰 FLs300 [图 解 ] 大 c4 毕 加 索 


图 3-28 习题 5 对 应 图 


IRANE Charger 


第 4 章 Dreamweaver CSS 基础 


O X Æ Dreamweaver CS5 的 工作 环境 。 
口 掌 握 Dreamweaver CS5 的 基本 操作 。 
口 掌 握 金 模 型 和 选择 符 的 重要 概念 。 

口 能 够 使 用 DIV 十 CSS? 模 式 制作 网 页 。 


Adobe Dreamweaver CS5 是 一 款 功能 强大 的 可 视 化 网 页 制作 工具 ,使 用 该 软件 能 够 
快捷 地 制作 出 极 具 表 现 力 的 网 页 。 本 章 主要 从 软件 的 使 用 方法 入 手 , 向 读者 介绍 软件 的 
常用 功能 。 此 外 ,还 配合 "CSS 十 DIV? 制 作 模式 详细 阐述 “基于 工作 过 程 ” 的 网 页 制作 方 
法 ,为 后 续 学 习 夯 实 基础 。 


41 初 识 Dreanweaver CS 


Dreamweaver CS5 为 不 同 层 次 的 用 户 提供 不 同 风格 且 灵 活 多 变 的 工作 环境 ,作为 初 
学 者 首先 应 该 了 解 一 下 Dreamweaver CS5 的 工作 环境 和 基本 设置 。 


4.1.1 Dreamweaver CS5 的 工作 环境 


成 功 安装 Dreamweaver CS5 后 , 单 击 桌面 快捷 方式 即 可 打开 软件 ,经 过 一 系列 初始 
化 首先 看 到 的 是 “起 始 页 对话 框 。 起 始 页 对 话 框 中 包含 “最 近 的 项 目 "“ 新 建 " 和 * 主 要 功 
能 ”3 个 栏目 。 顺 利 启 动 软件 ,并 打开 某 个 正在 编辑 的 XHTML 文档 ,此 时 可 以 看 到 整个 
工作 区 的 界面 ,如 图 4-1 所 示 。 

从 图 4-1 中 可 以 看 出 ,Dreamweaver CS5 的 工作 区 由 菜单 .面板 和 工具 栏 等 功能 模块 
组 成 ,部 分 功能 模块 的 含义 如 下 。 

。 代码 视图 : 用 于 显示 当前 网 页 文件 的 源 代码 。 

。 设 计 视 图 : 用 于 显示 当前 网 页 文件 在 浏览 器 中 的 效果 。 

。 文档 工具 栏 : 包括 按钮 和 弹出 式 菜单 ,提供 各 种 “文档 ”窗口 视图 、 各 种 查看 选项 

和 一 些 常 用 操作 。 

。 工作 区 切换 器 : 用 于 快速 切换 工作 区 布局 ,方便 各 类 用 户 的 需求 。 

。 插入 面板 : 分 类 显示 常用 的 命令 。 

。 CSS 面板 : 用 于 显示 编辑 CSS 样式 规则 。 


代码 视图 文档 工具 栏 设计 视图 


bta "| g] G sus CEEB 


R 站 一 插入 面板 

z o 

Ë 10 

a ". 四 

阿 联 首 航空 CSS 面 板 
标签 选择 器 9 ss: H <div id="copyright" ERATARA! 

W = 

ae 

| 文件 面板 

ba mo 无 m =l ü 
属性 检查 器 一 Ce "s 

os T| 


4-1 Dreamweaver CS5 工作 环境 


° 文件 面板 : 用 于 帮助 用 户 管理 文件 和 文件 夹 ,无 论 这 些 文件 存放 在 本 地 ,还 是 储 
存在 远程 服务 器 ,文件 面板 都 能 够 轻松 管理 ,类 似 于 Windows 的 资源 管理 器 。 

° 属性 检查 器 : 用 于 查看 当前 编辑 对 象 的 各 种 属性 。 

° 标签 选择 器 : 用 于 显示 环绕 当前 选 定 内 容 的 标签 的 层次 结构 。 单 击 某 个 标签 时 ， 
即 可 选择 该 标签 及 其 内 部 的 全 部 内 容 。 


4.1.2 工具 栏 与 面板 介绍 


1. “XË” T RË 

“文档 "工具 栏 在 实际 工作 中 使 用 率 最 高 ,其 主要 功能 就 是 帮助 用 户 在 “设计 "视图 、 
“代码 ”视图 和 "* 拆 分 "视图 之 间 快 速 切换 ,并 且 兼 具 CSS 检查 、 实 时 代码 和 实时 视图 等 功 
能 ,如 图 4-2 所 示 。 


| | 代码 | 拆 分 | 设计 | 实时 代码 r LENAB eg ÇQ. 2. C — 标题 ， 无 标题 文档 wW 


4-2 “文档 "工具 栏 


“文档 "工具 栏 中 , 除 切换 视图 的 按钮 外 ,其 他 各 按钮 的 功能 含义 详 见 表 4-1。 
表 4-1 “文档 "工具 栏 


#* a 功 能 
| 实时 代码 | 显示 浏览 器 用 于 执行 该 页 面 的 实际 代码 
E4) 检查 当前 CSS 规则 是 否 对 各 种 浏览 器 均 兼 容 
| 实时 视图 | 用 于 显示 基于 浏览 器 的 文档 视图 
| 检查 | 在 此 模式 下 允许 用 户 以 可 视 化 方式 详细 显示 CSS 框 模型 属性 
【本 用 于 在 浏览 器 中 预览 当前 编辑 的 网 页 
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续 表 
k = 功 能 
í. 使 用 户 利用 各 种 可 视 化 助理 来 设计 界面 
C 在 “代码 ”视图 中 进行 修改 后 刷新 文档 的 “设计 ”视图 
标题 : 用 于 设置 整个 文档 的 标题 , 它 将 显示 在 浏览 器 的 标题 栏 中 
t) 文件 管理 
2.“ 编 码 ” 工 具 栏 


“编码 ?工具 栏 位 于 整个 软件 界面 的 最 左 侧 。 该 工具 栏 主要 在 编辑 代码 时 使 用 ,由 于 
包含 的 功能 按钮 较 多 ,这 里 仅 对 最 常用 的 加 以 解释 , 详 见 表 4-2。 


表 4-2 “编码 ”工具 栏 

按钮 | 名 称 作 用 按钮 | 名 R 作 用 
回 | 打开 文档 显示 当前 打开 的 文档 | 国 | 语法 错误 警报 “| 启用 或 禁用 语法 错误 警报 
m) | 显示 代码 导航 “| 显示 代码 导航 器 A | 应 用 注释 ENEE 
E MEERE | 折 兰 一 组 标签 之 间 的 内 容 | O) | 删除 注释 删除 注释 
= . . = I EBE TCD W F 35 Es it 
Ë) rakik HAMARE 国 | 环绕 标 答 ee 
g) | 扩展 全 部 。 “| 还 原 所 有 折 冯 的 代码 。 | 图 | 最 近 的 代码 片段 fe s s. 
Darme ”| 选择 当前 标签 的 父 标签 “| 国 | 移动 或 转换 CSS| 移 动 CSS 位 置 ,或 转换 

CSS 类 别 
O | 选取 当前 代码 段 | 选取 当前 代码 段 国 | 缩 进 代 码 。 | 将 选 定 内 容 向 右 移动 
e es 显示 或 隐藏 代码 的 行 号 “| 国 | 突出 代码 ”| 将 选 定 内 容 向 左 移动 
E | 高 亮 无 效 代码 “| 用 黄色 显示 无 效 代 码 ”| 图 | 格式 化 源 代码 | 将 代码 赋 于 标准 格式 

3. 状态 栏 


网 页 文档 在 编辑 的 状态 下 ,状态 栏 始终 位 于 文档 窗口 的 底部 ,通过 状态 栏 用 户 可 以 查 
看 当前 文档 的 多 种 状态 ,如 图 4-3 所 示 。 
手 形 工具 ”缩放 工具 缩放 比例 设置 “文档 大 小 和 估计 下 载 时 间 


编码 指示 器 


Cdivhbox> Nj 100%’ vl294 x 542 157 K / 4 Æ Unicode (UTF-6) 
标签 选择 器 选取 工具 窗口 大 小 弹出 菜单 
图 4-3 状态 栏 


。 标签 选择 器 : 用 于 显示 环绕 当前 选 定 内 容 的 标签 的 层次 结构 。 
。 选取 工具 : 可 使 用 鼠标 直接 选取 页 面 中 的 元 素 。 


。 手 形 工具 : 用 于 在 “文档 "窗口 中 拖 动 文档 . 
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。 缩放 工具 与 缩放 比例 设置 : 两 者 均 可 对 文档 进行 缩放 操作 。 


。 窗口 大 小 弹出 菜单 : 用 于 将 “文档 "窗口 的 大 小 调整 到 预定 义 的 尺寸 。 
。 文档 大 小 和 估计 下 载 时 间 : 此 区 域 用 于 显示 当前 网 页 的 大 小 ,以 及 预 估 下 载 需要 


的 时 间 。 
° 编码 指示 器 : 显示 当前 文档 的 文本 编码 。 
4. 属性 检查 器 


属性 检查 器 主要 用 于 帮助 用 户 检查 和 编辑 当前 已 选 定 页 面 元 素 的 常用 属性 ,打开 或 
隐藏 属性 检查 器 的 快捷 键 是 Ctrl 十 F3。 

由 于 页 面 元 素 的 多 样 性 , 当选 择 不 同 的 对 象 时 ,属性 检查 器 中 的 各 种 参数 也 不 尽 相 
同 ,图 4-4 和 图 4-5 所 示 的 是 分 别 选 择 图 像 元 素 和 文本 元 素 时 属性 检查 器 的 内 容 。 


属性 


J B$, a EWE | BEO hees content 0! e G O PAD ~ 着 无 v| 
m | apeo) umo QO M o 
地 图 中 ) 委 直 边 距 | | BRO 边框 四) INOA 
[x] OOV xwe | Mi Q o WFO [kun ~] 


4-4 选择 图 像 元 素 时 的 属性 检查 器 


<m) | 格式 到 ) | 无 S) = x v BZ 注 注 经 二 标 EDO[ — 
bes mp 无 v O O VOD RRO 
TERE PR 
图 4-5 选择 文本 元 素 时 的 属性 检查 器 
5.“ 文 件 ” 面 板 


“文件 ?面板 类 似 于 Windows 资源 管理 器 ,用 于 帮助 用 户 管理 文件 和 文件 夹 ,如 图 4-6 
所 示 , 显 示 或 隐藏 该 面板 的 快捷 键 是 F8。 


6. “CSS 样式 ”面板 


“CSS 样式 ?面板 的 主要 功能 是 跟踪 影响 当前 页 面 元 素 的 CSS 规则 和 属性 ,该 面板 包 
括 * 全 部 ”和 “当前 ”两 种 模式 ,用 户 可 以 单 击 面板 项 部 的 按钮 进行 自由 切换 ,如 图 4-7 所 
示 。 此 外 ,打开 或 隐藏 该 面板 的 快捷 键 是 Shift 十 F11。 

在 实际 工作 中 ,通过 “CSS 样式 ”面板 新 增 或 编辑 某 一 元 素 的 CSS 规则 比较 麻烦 ,而 
且 效 率 不 高 ,设计 师 通 常 直接 对 CSS 文档 进行 编辑 , 至 于 编辑 的 方法 将 在 后 续 练 习 中 
体现 。 


7.“ 插 入 ”面板 


“插入 "面板 将 最 为 常用 的 菜单 命令 集成 在 一 起 ,并 按照 类 别 进行 组 织 分 类 ,如 图 4-8 
所 示 。 显 示 或 隐藏 “插入 ”面板 的 快捷 键 是 Ctrl+F2。 
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4-6 “文件 ”面板 
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4-7 “CSS 样式 ”面板 


z š 


4-8 “插入 ”面板 


在 “插入 ”面板 中 单 击 左 上 角 的 下 拉 菜 单 可 以 在 “常用 ”“ 布 局 “表单 “数据 ”、 
Spry、InContext Editing、“ 文 本 ”和 “收藏 夹 ”8 种 类 别 之 间 相 互 切换 。 由 于 包含 的 功能 按 
钮 较 多 ,这 里 仅 对 部 分 最 为 常用 的 功能 按钮 加 以 解释 , 详 见 表 4-3。 


表 4-3 常用 类 别 中 各 按钮 的 名 称 和 作用 


按钮 | 名 R * A 按钮 | 名 R * 用 
由 HTML、CSS 和 JavaScript 
超级 链接 在 网 页 中 插入 超级 链接 @ | 构件 组 成 的 网 页 组 件 
电子 邮件 链接 | 插入 电子 邮件 链接 日 期 可 插入 多 种 格式 的 日 期 
š >: 选择 一 个 网 页 文件 ,将 其 添 
命名 锚 记 用 于 页 面 内 定位 D | 服务 器 端 包括 加 到 当前 站 点 中 
水 平 线 在 光标 处 插入 水 平 线 Q | 注释 插入 HTML 注释 
表格 插入 表格 Ë | 文件 头 设置 文件 头 不 同 的 属性 
插入 DIV 标签 | 插入 DIV 标签 < | 脚本 插入 脚本 
可 插入 图 像 、 占 位 符 、 热 点 
图 像 等 对 象 B | 模板 创建 和 编辑 模板 
可 插入 Fash, FLV 等 多 媒 Sg 插入 标记 语言 的 标签 ,方便 
媒体 体 对 象 G | 标签 选择 器 编辑 代码 


4.1.3 Dreamweaver CS5 的 参数 设置 


在 Dreamweaver CS5 中 ,用户 可 以 根据 自己 的 需要 重新 规划 工作 环境 、 重 新 配置 软 
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件 参数 ,并 可 以 将 这 些 设置 进行 保存 ,以 便 引用 在 不 同 的 环境 中 。 
1. 常规 参数 设置 


启动 Dreamweaver CS5 ,执行 菜单 中 的 “编辑 >“ 首选 参数 ”命令 ,或 按 组 合 键 Ctrl 十 
U, 即 可 打开 “首选 参数 ”对 话 框 。 默 认 情 况 下 . 左 侧 “ 分 类 ”列表 中 选中 的 是 “常规 ”选项 
卡 , 如 图 4-9 所 示 。 该 选项 卡 中 部 分 选项 的 含义 如 下 。 


SERE] 


p) 
ns 
F 


DE [sama - 


i 2 


8 


Ë 8 
g 


(1) 启用 相关 文件 
该 选项 用 于 查看 哪些 文件 与 当前 文档 相关 ,例如 外 联 的 CSS 样式 或 JavaScript 等 文 
件 。Dreamweaver CS5 会 在 文档 顶部 为 每 个 相关 文件 显示 一 个 按钮 , 单 击 该 按钮 可 打开 


对 应 的 文件 。 


文档 选项 : [z] ITRORE O 


口 局 动 时 重新 打开 文档 8) 
回 打开 只 读 文 件 时 警 肯 用 户 W 
局 用 相关 文件 加 ) 
搜索 动 老 相关 文件 由): F v 
移动 文件 时 更 新 链接 (): | 提示 v 
MANE RAED 
区 许 观 字 节 内 联 输 入 Q) 
团 标 题 后 切 执 到 莹 通 段 落 O) 
口 万 许多 个 连续 的 空格 w 
回 用 <strong》 和 <em> fe Q> 和 DW 
回 在 > 或 1>> 8》 标签 中 放置 可 编辑 区 域 时 发 出 警 省 


历史 步 台 最 多 次 数 Q): so 
#EFRO: | 


4-9 ”首选 参数 一 一 “常规 "选项 卡 


(2) 用 一 strong 二 和 一 em 二 代替 一 b 之 和 二 这 

由 于 WWW 联合 会 不 鼓励 使 用 二 b 二 标签 和 二 i 二 标签 ,所 以 Dreamweaver 就 分 别 使 
用 二 strong 二 标签 和 二 em 标签 替代 它们 ,这 也 是 二 strong 二 标签 和 二 em 放 标 签 语义 信 
息 更 为 明确 的 原因 。 

(3) 在 p> 或 <hl 二 ~ 二 h6 志 标签 中 放置 可 编辑 区 域 时 发 出 警告 

该 选项 针对 的 是 指定 具有 可 编辑 区 域 的 Dreamweaver 模板 时 的 情况 , 当 有 违反 该 选 
项 的 操作 ,软件 会 警告 用 户 无 法 在 此 区 域 中 创建 更 多 段落 。 


2. CSS 代码 格式 设置 


通过 设置 CSS 代码 格式 ,可 以 将 所 有 CSS 属性 放置 在 单独 的 行 中 ,不 仅 便于 阅读 ,而 
且 具 有 优化 代码 的 作用 。 

首先 ,执行 “编辑 ”>“ 首 选 参数 ”命令 ,在 弹出 的 “首选 参数 ”对 话 框 中 选择 “代码 格式 ” 
类 别 。 然 后 ,在 “高 级 格式 设置 ” 旁 单 击 “*CSS” 按 钮 ,此 时 弹出 如 图 4-10 所 示 的 对 话 框 。 
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回 月 用 纺 进 尿 性 E) [1 | | 制 表 符 v 
和 个 属性 位 于 单独 的 行 上 Q) 

口 左 大 插 呈 位 于 单独 的 行 上 中) 

口 芭 在 多 于 一 个 属性 时 才 适用 W 
回 规则 的 所 有 选择 器 位 于 同一 行 上 G) 
Deasy 


padding: Opx; 
display: block: 


图 4-10 “CSS 源 格式 选项 "对话 框 


在 此 对 话 框 中 ,选择 要 应 用 于 CSS 源 代码 的 选项 ,即刻 在 下 方 “ 预 览 窗 格 中 实时 显 
示 修 改 后 的 预览 效果 。 这 里 取消 “每 个 属性 位 于 单独 的 行 上 ” 复 选 框 , 即 可 实现 属性 放置 
在 一 行 上 的 效果 。 


3. 工作 区 布局 设置 


O 在 Dreamweaver CS5 界面 项 部 区 域 的 “设计 器 "下 拉 菜 单 中 ,包含 多 种 软件 自 带 的 
工作 区 布局 ,如 图 4-11 所 示 , 用 户 直 接 选择 即 可 在 不 同 工 作 区 之 间 进 行 切换 。 
© 在 “设计 器 "下拉 菜 单 中 选择 “新 建 工 作 区 ”选项 ,此 时 弹出 如 图 4-12 所 示 的 对 话 
框 。 输 入 新 工作 区 的 名 称 后 , 单 击 “ 确 定 ” 按 钮 , 即 可 将 用 户 当 前 的 面板 位 置 和 大 小 存储 到 
命名 的 工作 区 中 。 
应 用 程序 开发 人 员 


应 用 程序 开发 人 员 ( 高 级 ) 
婚典 


WHARE N 
JERE 
Er GE D 名称 :Ff | 


人 bJ C ] 


管理 工作 区 W. 


KELPE 


图 4-11 选择 工作 区 布局 图 4-12 新 建 工 作 区 


当 用 户 工 作 区 中 的 面板 移动 或 关闭 时 ,可 以 通过 “设计 器 ?下拉 菜 单 中 的 “ 重 置 工作 

区 ”恢复 该 工作 区 。 
@ 执行 “设计 器 "下拉 菜单 中 的 “管理 工作 区 ”, 即 可 弹出 “管理 工作 区 ”对 话 框 。 其 中 
包含 了 用 户 自 定义 工作 区 的 名 称 列表 ,选择 某 个 工作 区 可 以 对 其 进行 重 命 名 和 删除 操作 。 
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42 创建 与 管理 站 点 


无 论 是 制作 单个 网 页 还 是 开发 整个 网 站 系统 ,创建 站 点 都 是 必 不 可 少 的 重要 环节 。 
通过 创建 站 点 ,能 够 让 Dreamweaver 更 好 地 管理 网 站 内 各 种 文件 。 


4.2.1 创建 站 点 


1. 什么 是 站 点 


站 点 是 一 个 存储 区 , 它 存储 了 一 个 网 站 包含 的 所 有 文件 ,可 以 理解 为 一 种 文档 的 组 织 
形式 ,Dreamweaver 的 使 用 是 以 站 点 为 基础 的 ,必须 为 每 一 个 要 处 理 的 网 站 建立 一 个 
站 点 。 

站 点 可 分 为 本 地 站 点 和 远程 站 点 。“ 本 地 站 点 " 指 的 是 在 用 户 本 地 计算 机 硬盘 中 构建 
用 来 存放 整个 网 站 框架 的 本 地 文件 夹 。“ 远 程 站 点 ”通常 位 于 运行 Web 服务 器 的 计算 机 
上 ,具有 与 本 地 文件 夹 相 同 的 名 称 。 也 就 是 说 ,用 户 发 布 到 远程 文件 夹 的 文件 和 子 文件 夹 
是 本 地 创建 的 文件 和 子 文件 夹 的 副本 。 


2. 如 何 创 建 本 地 站 点 


在 Dreamweaver CS5 中 ,利用 菜单 创建 本 地 站 点 的 具体 步骤 如 下 : 
O 启动 Dreamweaver CS5 ,执行 “站 点 ”>“ 新 建站 点 "命令 ,此 时 弹出 如 图 4-13 所 示 
的 对 话 框 。 


站 点 设置 对 象 我 的 第 一 个 站 点 


Dreamweaver 站 点 是 网 站 中 使 用 的 所 有 文件 和 资源 的 集合 。 Dreamweaver 
站 点 通常 包含 两 个 部 分 : 可 在 其 中 存储 和 处 理 文件 的 计算 机 上 的 本 地 文件 
夹 ， 以 及 可 在 其 中 将 相同 文件 发 布 到 web 上 的 服务 器 上 的 远程 文件 来 . 
您 可 以 在 此 处 为 Dreamweaver 站 点 选择 本 地 文件 夹 和 名 称 。 
站 点 名 称 : [我 的 第 一 个 站 点 
本 地 站 点 文件 奕 : [E: myweb\ 


图 4-13 “站 点 设置 对 象 "对 话 框 一 站 点 
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@ 在 此 对 话 框 左 侧 列表 中 选择 * 站 点 "选项 ,并 在 右 便 
“站 点 名 称 "文本 框 中 ,输入 待 创建 站 点 的 名 称 , 然 后 单 击 回 | 最 2 
图 标 按钮 ,在 弹出 的 对 话 框 中 为 本 地 站 点 文件 夹 选择 存储 E 

路 径 。 

@ 由 于 本 例 不 需要 连接 到 Web 并 发 布 页 面 ,所 以 这 里 不 
需要 进行 服务 器 设置 ,在 图 4-13 所 示 的 对 话 框 中 单 击 * 保 存 ” 
按钮 , 即 可 完成 本 地 站 点 的 创建 。 此 时 “文件 ”面板 中 立刻 显 
示 新 站 点 的 根 目录 ,如 图 4-14 所 示 。 


4.2.2 创建 第 一 个 网 页 文档 


站 点 创建 完成 后 ,就 可 以 在 其 内 部 创建 网 页 文档 了 。Dreamweaver 提供 了 多 种 类 型 
的 页 面 文档 供用 户 选 择 ,这 里 以 创建 XHTML 文档 为 例 向 读者 讲解 创建 过 程 。 

【演练 4-1】 创建 第 一 个 网 页 文档 。 

(Q) 启动 Dreamweaver CS5 ,执行 菜单 栏 的 “文件 ”新建 "命令 ,此 时 打开 如 图 4-15 
所 示 的 对 话 框 。 


图 4-14 新 建 本 地 站 点 


D =n 


1 NEE. AP, FEME 
5, + 


D =a 1 AM 
D anren 


E zaren 


y 


zenn mL 1.0 Transitional V 


附加 css 文件 - 


TESSO 


4-15 新 建文 档 


© 选择 对 话 框 左 侧 的 “空白 页 ”类 别 , 从 “页 面 类 型 " 列 选择 要 创建 的 页 面 类 型 ,这 里 
选择 “HTML” 类 型 。 

© 如 果 用 户 希 望 新 建 的 页 面 中 包含 CSS 布局, 则 可 以 从 “布局 ” 列 中 选择 一 个 预 设计 
的 CSS 布局 ,这 里 选择 “无 ?类 型 。 

需要 指出 的 是 ,在 “布局 ” 列 中 有 “固定 "和 “液态 ”两 种 类 型 “固定 ” 指 的 是 ,宽度 是 以 
像素 指定 的 ,不 会 根据 浏览 器 的 大 小 自 适 应 改变 ;“ 液 态 ” 指 的 是 ,宽度 是 以 站 点 访问 者 的 
浏览 器 宽度 的 百分比 形式 指定 的 ,会 根据 浏览 器 的 大 小 自 适应 改变 。 
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@ 从 “文档 类 型 弹出 菜单 中 选择 需要 的 文档 类 型 ,这 里 保持 默认 的 “XHTML 1. 0 
Transitional” 选 项 不 变 , 最 后 单 击 “ 创 建 " 按 钮 , 即 可 创建 一 个 最 简单 的 空白 文档 。 
O 在 空白 文档 中 输入 文字 内 容 , 执 行 “文件 >“ 保存” 命令 ,在 弹出 的 对 话 框 中 将 文 
件 名 修改 为 “第 一 个 网 页 . html”, 最 后 单 击 “ 保 存 ” 按 钮 , 即 可 完成 创建 过 程 。 
© 在 “文档 "工具 栏 中 单 击 | 蕊 图标, 在 其 二 级 菜单 中 选择 “预览 在 IExplore” 选 项 ,如 
图 4-16 所 示 。 此 时 , 即 可 通过 TE 浏览 器 看 到 当前 正在 编辑 的 网 页 效果 ,如 图 4-17 所 示 。 
/无 标题 文档 - win... KOR 


EE e 预 文 销 \index. htnl w 
XPO SEO FEV H” 


TRER Erm 


E 
MRE 360SE n2 我 的 第 一 个 网 页 文档 ! 


预览 在 Firefox 


预览 在 Device Central — 


预览 在 Adobe BrowserLab Ctrl+Shift+F12 
编辑 浏览 器 列表 O). 


图 4-16 选择 预览 环境 图 4-17 预览 效果 (1) 


4.2.3 站 点 内 文件 管理 


站 点 创建 完成 后 ,还 需 在 站 点 内 部 创建 文档 和 文件 夹 , 下 面 以 示例 的 形式 讲解 站 点 内 
文件 管理 的 相关 操作 。 


1. 在 站 点 内 创建 文件 夹 


【演练 4-2】 创建 名 为 images 的 文件 夹 。 

O 启动 Dreamweaver CS5 ,创建 名 为 “站 点 内 文件 管理 ”的 站 点 。 

© 在 软件 菜单 栏 中 ,执行 “窗口 ”文件 ”命令 ,打开 ”文件 ?面板 。 右 击 站 点 名 称 ,在 
弹出 的 右键 菜单 中 选择 “新 建文 件 夹 "选项 ,如 图 4-18 所 示 。 

@ 此 时 ,在 站 点 根 目录 下 新 增 了 一 个 文件 夹 ,并 且 新 建文 件 夹 名 称 处 于 可 编辑 状态 ， 
这 里 将 新 建文 件 夹 命名 为 images, 用 于 存放 站 点 图 片 , 如 图 4-19 所 示 。 


| 加 站 点 内 文件 管理 JELLEGE S 站 点 内 文件 管理 v | 本 地 视图 ` 
&c|eon>aeg 


多 Cli58 介 名 全 | 日 


BO 站 点 - 站 点 内 文件 管理 GT: \ 教 
日 O [images 文件 来 


Ñ 


图 4-18 站 点 右键 菜单 图 4-19 为 新 建文 件 夹 命名 
60 


第 4 章 Dreamweaver CS5 Zx 


© 若 要 在 名 为 images 文件 夹 内 部 创建 子 文件 夹 ,只 需 单 击 鼠 标 右 键 选择 images X 
件 夹 , 在 其 二 级 菜单 中 选择 “新 建文 件 夹 ”选项 即 可 ,如 图 4-20 所 示 。 


局 站 点 内 文件 管理 v | 本 地 视图 v 
&#c[|o o >e e [5 


站 点 - 站 点 内 文件 管理 TA. 
@ imes 


名 — 1 360seUB 


mO 站 点 - 站 点 内 文件 管理 Ff:\ 教 
E @ imgs 


GGJ 
m 


< > 
© 1! 个 # 地 项 目 六 和 中 ,各 闪 315 个 于 (HE 


4-20 创建 子 文件 夹 4-21 创建 空白 HTML 文档 


O 文件 夹 创建 完成 后 ,可 以 在 其 内 部 创建 空白 HTML 文档 。 单 击 鼠 标 右键 选择 某 
个 文件 夹 ,选择 右键 菜单 中 的 “新 建文 件 ” 选 项 ,同样 可 以 创建 空白 文档 ,如 图 4-21 所 示 。 


2. 文件 或 文件 夹 的 复制 .删除 操作 


【演练 4-3】 基本 操作 。 
© 启动 Dreamweaver CS5 ,创建 名 为 “ 基 
本 操作 ”的 站 点 ,并 在 该 站 点 内 创建 空白 网 页 


ET 
k c|[6 $ >” ç S| 


日 局 MA- 站 点 内 的 


O img 

文档 和 多 个 文件 夹 。 © :me | RRD 

@ 用 鼠标 右键 单 击 待 操作 的 文件 或 广 =" me ， 
件 夹 ,在 弹出 的 右键 菜单 中 执行 “编辑 ”>* 删 gQ can 
除 "命令 , 即 可 将 对 象 删除 ,如 图 4-22 所 示 。 aro a 

@ 在 “文件 "面板 中 ,选择 index. html 文 Hew g 
档 , 将 其 拖 放 到 其 他 文件 夹 内 ,如 图 4-23 所 ETTA 
示 , 同 样 可 以 实现 剪 切 的 操作 。 


需要 特别 指出 的 是 , 当 文 件 或 文件 夹 通过 ”文件 ?面板 移动 位 置 时 ,其 中 的 链接 信息 也 
跟随 着 发 生变 化 ,这 时 软件 会 弹出 如 图 4-24 所 示 的 对 话 框 , 用 来 询问 设计 者 是 否 要 更 新 
被 复制 或 被 移动 文件 中 的 链接 信息 ,通常 用 户 单 击 “ 更 新 "按钮 即 可 。 


C 站 点 内 的 复制 、 剖 切 和 机 E v EHRE V 
如 G3 人 名 加 | 日 


EO 站 点 - 站 点 内 的 . x= 
Š> rf x= 
@ = xi 


图 4-23 剪 切 文件 图 4-24 更 新 文件 
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4.2.4 站 点 的 管理 


对 站 点 的 管理 主要 涉及 打开 站 点 ,复制 站 点 ,编辑 站 点 ,删除 站 点 等 操作 。 
1. 打开 与 编辑 站 点 


O 要 打开 一 个 创建 好 的 站 点 ,只 需 在 "文件 "面板 的 ”IE 站 


左上 方 的 下 拉 菜 单 中 选择 要 打开 的 站 点 即 可 ,如 图 4-25 | 局 sorR 用 守则 一 国 由 四。 v 本 地 视图 v 
D eRe a) P) 
所 示 。 O sezi — samaa E 
@ 在 Dreamweaver CS5 的 菜单 栏 中 执行 “站 点 ”一 maa F: zi 
“管理 站 点 ”命令 ,或 者 在 “文件 ?面板 的 左上 方 的 下 拉 菜 i 
单 中 选择 “管理 站 点 ”选项 , 即 可 打开 如 图 4-26 所 示 的 对 
话 框 。 
© 选择 某 个 待 编 辑 的 站 点 , 单 击 “编辑 按钮 , 即 可 m 
对 该 站 点 的 相关 设置 进行 编辑 。 
@ 编辑 完成 后 , 单 击 “ 保 存 ” 按 钮 ,可 以 返回 “管理 站 
点 ”对 话 框 。 最 后 单 击 “ 完 成 ”按钮 , 即 可 完成 对 该 站 点 的 
编辑 操作 。 
馈 三 一 公司 网 站 
2. 删除 与 复制 站 点 上 
加 三 一 竺 理 后 台 
加 三 -一 表 相 表单 第 6 章 
O 如 果 不 再 需要 Dreamweaver CS5 对 某 站 点 进行 -res 加 
管理 ,在 如 图 4-26 所 示 的 对 话 框 中 ,选择 某 个 待 编辑 的 图 4-25 打开 站 点 


站 点 , 单 击 “删除 ”按钮 , 即 可 将 站 点 删除 。 

© 如 果 用 户 想 创建 多 个 结构 相同 或 类 似 的 站 点 ,以 便 提高 工作 效率 ,只 需 在 如 图 4-26 
所 示 的 对 话 框 中 ,选择 某 个 待 编辑 的 站 点 , 单 击 “ 复 制 "按钮 , 即 可 将 指定 站 点 复制 ,新 复制 
的 站 点 名 称 也 会 立刻 出 现在 “管理 站 点 ”对话 框 中 ,如 图 4-27 所 示 。 


chll 论 坛 设计 
MARS 


图 4-26 “管理 站 点 ”对 话 框 图 4-27 复制 站 点 


3. 导出 /导入 站 点 


为 了 能 够 在 各 计算 机 和 不 同 版 本 的 软件 间 移 动 站 点 ,或 者 与 他 人 共享 设置 ， 
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Dreamweaver 还 提供 了 站 点 的 导 和 人 /导出 功能 。 

户 只 需 在 图 4-26 所 示 的 对 话 框 中 ,选择 某 个 待 导出 的 站 点 , 单 击 “ 导 出 ”按钮 ,将 其 
保存 为 “. ste” 扩 展 名 的 XML 文件 即 可 。 导 入 站 点 是 导出 站 点 的 反 向 操作 ,这 里 不 再 进行 
介绍 。 


43 CSS 在 Dreanweaver 中 的 运用 


之 前 的 章节 已 经 阐述 了 使 用 “记事 本 ”程序 如 何 将 CSS 与 XHTML 联系 起 来 的 方法 , 那 
么 在 Dreamweaver CS5 中 CSS 又 是 如 何 发 挥 功 能 呢 ? 本 节 主 要 讲述 CSS 与 Dreamweaver 
的 链接 类 型 ,以 及 在 CSS 中 最 为 重要 的 选择 符 知 识 。 


4.3.1 CSS 的 链接 类 型 


根据 实际 需要 ,可 以 把 CSS 插入 到 网 页 的 不 同位 置 ,依据 插入 位 置 的 不 同 ,常见 的 
CSS 样式 类 型 有 内 联 样式 (Inline Style Sheet) .内 部 样式 (Internal Style Sheet) 和 外 部 样 
式 (External Style Sheet) 。 


1. 内 联 样式 


内 联 样式 指 的 是 将 CSS ER (X)HTML 标签 混合 使 用 ,这 种 方法 可 以 很 简单 地 对 
某 个 元 素 单独 定义 样式 。 内 联 样式 的 使 用 是 直接 在 (X)HTML 标签 里 添加 style 参数 ， 
而 style 参数 的 内 容 就 是 CSS 的 属性 和 值 。 

【演练 4-4] CSS 的 内 联 样式 。 

O 启动 Dreamweaver CS5 ,创建 空白 XHTML 文档 ,在 该 文档 中 输入 标题 和 段落 
文字 。 

© 将 鼠标 定位 在 “代码 ”视图 ,分 别 在 hl CRA p 元 素 内 部 创建 内 联 样式 ,如 图 4-28 
所 示 。 通 过 浏览 器 预览 可 以 看 到 效果 ,如 图 4-29 所 示 。 


C 内 联 样式 - Windows..- DBR) 


GO |e rumdmsisu wv + 


文件 中 RAD FEV KARU” 
TERR Ener | 


此 段落 修改 为 红色 字体 ， 并 
且 字 号 设置 为 20px 
<body> 此 处 的 段落 设置 为 字体 加 粗 1 
<hl s Fres Ha 有 ee pp 
<p st: #50 20px; "> 此 段落 修 | rt 并 且 字 号 设置 为 20px</p> 
<p style: nt ht bold; SERBE R FEMA! </p> 


</body> 


图 4-28 内 联 样式 在 文档 结构 中 的 体现 图 4-29 内 联 样式 预览 效果 
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仔细 观察 网 页 文档 的 代码 从 中 可 以 发 现 , 内 联 样 式 与 (X)HTML 标签 混合 在 一 起 ， 
即便 是 同一 类 标签 (如 段落 p 标签 ) ,在 应 用 不 同 的 CSS 样式 规则 后 呈现 出 的 外 观 也 是 不 
同 的 ,由 此 可 以 得 出 内 联 样式 作用 的 范围 很 小 , 仅 限 于 当前 元 素 。 如 果 大 面积 使 用 内 联 样 
式 作为 网 页 制作 的 美化 手段 ,这 里 不 推荐 使 用 。 


2. 内 部 样式 


内 部 样式 位 于 页 面 标签 的 二 head 盖 与 一 /head 二 之 间 , 且 使 用 一 style 二 标签 进行 包 
庄 , 下 面 以 示例 进行 演示 。 
【演练 4-5】 CSS 的 内 部 样式 。 
O 启动 Dreamweaver CS5, 创 建 空 白 XHTML 文档 ,在 该 文档 中 输入 标题 和 段落 
文字 。 
© 将 鼠标 定位 在 “代码 ”视图 ,在 页 面 顶部 的 head 区 域 编写 对 应 的 CSS 规则 ,如 图 4-30 
所 示 。 通 过 浏览 器 预览 可 以 看 到 效果 ,如 图 4-31 所 示 。 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 aa 下 


“http: //www.w3.org/TR/xhtml1/DTD/xhtml1-transitional. [5 内 部 样式 - Windows Int... EBR) 
er http://www.w3.org/1999/xhtml"> GO FPD AWHAEC SV v O Xx 
Curts pi y a E ent-type" content="text/html; charset=utf-8" /> LPD RED FEV KRAMA I” 
<style type="text/css"> 文 kmx ENSE 
nl 

color: #F00; 
Dnt-famiiy: sistem"; CSS 的 内 部 样式 
</style> _ 
</head> 内 部 样式 位 于 页 面 标签 的 head 区 域 , 
sz 且 使 用 style 标 签 进行 包 囊 。 
SSs 的 内 部 样式 </ 
<p> 内 部 样式 位 TAMRE neadZi, 、 且 使 用 style 标 答 进行 BE. </p> 内 部 样式 作用 范围 是 当前 页 面 。 
<p> 内 部 样式 作用 范围 是 当前 页 面 ，</p 
/ bod; 
Zhenl> ET n- Aon ~ 

4-30 内 部 样式 在 文档 结构 中 的 表现 4-31 内 部 样式 预览 效果 


本 例 中 内 部 样式 只 对 当前 页 面 有 效 , 不 能 跨 页 面 执行 ,所 以 达 不 到 用 CSS 管理 整个 
风格 布局 的 目的 。 因 此 ,在 实际 应 用 中 ,使 用 内 部 样式 的 几率 相对 较 少 。 


3. 外 部 样式 


外 部 样式 是 目前 在 实际 工作 中 使 用 最 为 广泛 的 一 种 形式 。 它 将 CSS 样式 代码 保存 
为 一 个 样式 文件 ,然后 在 页 面 中 使 用 二 link 二 标签 链接 到 这 个 样式 文件 ,以 便 实现 多 个 页 
面 调 用 同一 个 外 部 样式 文件 的 目的 。 该 类 型 的 样式 所 使 用 的 所 link 二 标签 必须 放置 在 
<head> Si </head> Z B] , 

【演练 4-6] CSS 的 外 部 样式 。 

© 启动 Dreamweaver CS5 ,创建 名 为 “CSS 的 外 部 样式 ”的 站 点 。 

© 在 该 站 点 中 创建 空白 XHTML 文档 ,并 保存 为 index. html, 再 创建 名 为 style 的 
文件 夹 , 用 于 放置 CSS 文 件 。 

@ 执行 “站 点 ”新 建站 点 ”命令 ,创建 空白 CSS 文档 ,保存 在 style 文件 夹 中 ,并 命 
名 为 div. css。 
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@ 切换 到 index. html 页 面 ,打开 “CSS PÉIR” T R , ñ hr IN UE 3 BJ E 图 标 按钮 ,此 
时 弹出 “链接 外 部 样式 表 ” 对 话 框 。 

© 在 此 对 话 框 中 , 单 击 “ 浏 览 ” 按 钮 ,将 刚刚 新 建 的 外 部 样式 文件 div. css 链接 到 
index. html 页 面 中 ,如 图 4-32 所 示 。 


链接 外 部 样式 表 


文件 /WEL OD :style/div. ess 


EMI OWEU 
〇 SA 四 


Wto 
你 也 可 以 辆 入 逗号 分 隔 的 妊 件 类 型 列表 


Dreamveaver 的 范例 样式 表 可 以 帮助 您 起 步 


图 4-32 链接 外 部 样式 表 


@ 此 时 ,软件 界面 显示 两 个 文件 已 经 链接 ,如 图 4-33 所 示 。 用 户 单 击 某 个 文件 ,可 
以 在 这 两 个 文档 之 间 相 互 切换 。 

© 切换 到 index. html 页 面 中 ,输入 标题 和 段落 文本 ,其 当前 页 面 结构 如 图 4-34 
所 示 。 


<body> 
index. htal X | | <h1>Css 的 外 部 样式 </h1> 
a <p> 此 文档 使 用 css 的 外 部 样式 进行 链接 ，</py> 
CRD div cs </body> 
图 4-33 ”建立 链接 图 4-34 页 面 结构 (1) 


@ 切换 到 div. css 页 面 中 ,输入 相关 CSS 规则 ,如 图 4-35 所 示 。 
保存 当前 文档 ,通过 浏览 器 预览 后 的 效果 如 图 4-36 所 示 。 
无 标题 文档 - Windows In. É 


GO |e rumimsicovns o x 
charset x IHD SED FEV emsa I” 


/* css Doc rant */ CS5S 的 外 部 样式 ARR xem 


hit 


Sragitawce mann (2011) —TutEgmu esos) Pae CSN nder. hai (OME) -Ox 


es family: s "微软 雅思 "7 此 文档 使 用 CSS 的 外 部 样式 进行 链接 
ation:underline; 
/"SRARESTE2S55, 并 增加 下 画 线 效果 */ 
p 此 文档 使 用 Css 的 外 部 样式 进行 链接 


EEEE Fonesre / 


| @ € sme 


[XJ Q lo sis 1 K 1 wie OT) 


图 4-35 CSS 规则 (1) 图 4-36 预览 效果 (2) 


本 例 中 , 当 网 页 文档 与 CSS 文档 成 功 链接 后 ,在 网 页 文档 的 head 区 域 会 增加 二 link 二 标 
签 , 其 内 部 的 href= "style/css. css" 是 指 外 部 样式 文件 的 路 径 位 置 ,rel 王 "stylesheet" 是 指 
在 页 面 中 使 用 外 部 的 样式 表 ,type 二 "text/css" 是 指 文件 的 类 型 是 样式 表 文 件 。 
由 于 外 部 样式 表 文 件 可 以 应 用 于 多 个 页 面 , 所 以 当 样 式 文件 被 修改 后 ,站 点 所 有 页 面 
也 将 随 之 改变 。 这 样 不 仅 减轻 了 工作 量 ,而 且 有 利于 后 期 修改 和 维护 ,同时 浏览 时 也 减少 
了 重复 代码 的 下 载 量 。 
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在 网 页 中 的 任何 一 个 元 素 都 遵守 盒 模型 的 规范 ,可 以 说 盒 模型 的 概念 是 页 面 布局 的 
基础 。 简 单 地 说 ,可 以 将 网 页 中 每 个 元 素 看 做 一 个 盒子 ,该 盒子 具有 margin( 外 边 距 )、 
padding( 内 边 距 ) 和 border( 边 框 ) 三 种 基本 属性 ,其 示意 图 如 图 4-37 所 示 o 


外 边 距 (margin) 


边框 (border) 


Z 


内 边 距 (padding) 


= 


NA 
4-37 盒 模型 示意 图 


从 图 4-37 中 可 以 理解 ,“ 元 素 主体 内 容 " 指 的 就 是 元 素 本 身 ( 如 p 元素、hl 元 素 、div 
元 素 ,span 元 素 等 );“ 内 边 距 (padding)” 指 的 是 元 素 边 框 与 元 素 内 容 之 间 的 空白 区 域 ; 
“边框 (border)” 指 的 是 围绕 元 素 内 容 和 内 边 距 的 一 条 或 多 条 线 ;“ 外 边 距 (margin)” 指 的 
是 元 素 与 元 素 之 间 的 空间 。 

在 默认 状态 下 ,margin、padding 和 border 三 种 基本 属性 是 没有 赋值 的 ,其 外 在 的 表 
现形 式 根据 浏览 器 的 种 类 不 同 而 有 细微 差别 。 如 果 对 这 些 属性 进行 赋值 ,那么 其 值 会 影 
响 元 素 本 身 的 高 度 和 宽度 。 

(1) 盒 模型 的 宽度 

盒 模型 的 宽度 = 左 外 边 距 (margin-left) 十 左边 框 (border-left) 十 左 内 边 距 (padding- 
left) 十 内 容 宽度 (width) 十 右 内 边 距 (padding-right) 十 右边 框 (border-right) 十 右 外 边 距 
(margin-right) 

(2) 盒 模型 的 高 度 

盒 模型 的 高 度 二 上 外 边 距 (margin-top) 十 上 边框 (border-top) 十 上 内 边 距 (padding- 
top) 十 内 容 高 度 (height) 十 下 内 边 距 (padding-bottom) 十 下 边框 (border-bottom) 十 下 外 
边 距 (margin-bottom) 

【演练 4-7】 盒 模型 。 

© 启动 Dreamweaver CS5 ,创建 空白 XHTML 文档 ,将 鼠标 定位 在 “代码 ”视图 中 ,插入 
宽度 和 高 度 均 为 100px, 名 称 为 “box_1” 和 “box_2” 的 div 容器 ,页 面 结构 如 图 4-38 所 示 。 

© 在 页 面 顶部 head 区 域 ,使 用 内 部 样式 插入 相关 CSS 规则 ,赋予 名 为 “box_1” 和 
“box_2” 的 div 容器 有 关 盒 模型 的 属性 ,如 图 4-39 所 示 。 

© 在 “设计 ”视图 中 选择 “box_1” 容 器 ,此 时 可 以 看 到 外 边 距 .边框 和 内 边 距 等 属性 ， 
如 图 4-40 所 示 。 

“box_1” 容 器 的 宽度 二 40px 十 30px 十 20px 十 100px 十 20px 十 30px 十 40px 二 280px。 

“box_1” 容 器 的 高 度 二 30px 十 30px 十 30px 十 100px 十 30px 十 30px 十 30px 二 280px。 
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sewe types: "text/css"> 


i 100px; /* 定 ， 
height:100px;/* 定 
padding: 30px 20p: 
border: 30px #F00 so: 
margin:30px 40px; / 


度 为 100px*/ 


上 下 内 边 距 为 30px， 左 右 内 边 距 为 20px*/ 
定义 元 票 四 周边 框 为 30px 宽 ， 红 色 ， 实 线 型 +/ 
义 上 下 外 边 距 为 30px， 左 右 外 边 距 为 40px*/ 


 Width:100px; /* 定 义 元 素 宽 度 为 100px*/ 
height :100px;/* 定 义 元 泰 高 度 为 100px*/ 
padding:30px;/* 定 义 内 边 政 为 30px*/ 


<body> margin:50px 30px;/* 定 义 上 下 外 边 四 为 50px， 左 右 外 边 距 为 30px*/ 
<div id="box 1"></div> border:20px #06F solid;/* 定 义 元 泰 四 周边 框 为 20px 宽 ， 蓝 色 ， 实 线 型 */ 
<div id="box_2"></div> } 

</body> </style> 

图 4-38 页 面 结构 (2) 图 4-39 CSS 规则 (2) 


@ 在 “设计 ”视图 中 选择 *box_2? 容 器 ,此 时 可 以 看 到 外 边 距 ,边框 和 内 边 距 等 属性 ， 
如 图 4-41 所 示 。 


一 = 
30px 


40px RS > 


30px 
N NA N SS 
px NN 
4-40 ”box_1 容器 的 盒 模型 图 4-41 box_2 容器 的 盒 模型 


“box_2” 容 器 的 宽度 三 30px 十 20px 十 30px 十 100px 十 30px 十 20px 十 30px 二 260px。 

“box_2” 容 器 的 高 度 三 50px 十 20px 十 30px 十 100px 十 30px 十 20px 十 50px 二 300px。 

这 里 需要 特别 注意 的 是 ,按照 常规 理解 “box_1” 和 “box_2” 的 高 度 应 该 为 280px 与 
300px 之 和 , 即 580px; 而 实际 情况 并 非 如 此 。 在 CSS 中 , 当 两 个 元 素 的 外 边 距 相 遇 时 ,这 
两 个 元 素 之 间 的 外 边 距 就 会 进行 琶 加 ,形成 一 个 外 边 距 。 这 个 外 边 距 的 高 度 等 于 这 两 个 
元 素 外 边 距 高 度 的 较 大 者 。 

综 上 所 述 ,“box_1” 与 “box_2” 的 高 度 之 和 三 (30px 十 30px 十 30px 十 100px 十 30px 十 
30px) 十 50px 十 (20px 十 30px 十 100px 十 30px 十 20px 十 50px) , 即 550px. 


4.3.3 CSS 选择 符 

当 需 要 对 XHTML 文档 中 某 一 标签 使 用 CSS 样式 时 ,就 要 使 用 CSS 选择 符 来 精确 
指定 该 元 素 。 由 于 CSS 选择 符 类 型 多 种 ,这 里 仅 介绍 最 为 常用 的 选择 符 类 型 。 

1. 通配符 选择 符 与 类 型 选择 符 


通配符 选择 符 用 * * ”号 进行 表示 ,其 作用 是 定义 页 面 所 有 元 素 的 样式 ,而 类 型 选择 符 
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指 的 是 那些 使 用 网 页 已 有 标签 类 型 作为 名 称 的 选择 符 , 如 body .p 和 hl 等 。 
【演练 4-8】 通配符 选择 符 与 类 型 选择 符 。 
O 启动 Dreamweaver CS5 ,创建 空白 XHTML 文档 ,将 鼠标 定位 在 “代码 ”视图 中 ， 
插入 相关 文字 内 容 , 如 图 4-42 所 示 。 
© 在 页 面 顶部 head 区 域 ,使 用 内 部 样式 插入 相关 CSS 规则 ,如 图 4-43 所 示 。 
` Í color: $F00;/* 对 所 有 元 素 应 用 样式 ， 设 置 字体 为 红色 */ 


hl 


E EENERT S ANERR</h color:#06F; /* 设 置 字体 颜色 为 蓝 色 */ 
<p> 通 配 符 选 择 符 用 "*" 号 进行 表示 ， ”英作 用 是 定义 页 面 所 有 元 认 的 样式 ， 而 类 font-size:26px;/* 设 置 字体 大 小 */ 
型 选择 符 指 的 是 那些 使 用 网 页 己 有 标 穴 类 型 作为 名 称 的 选择 符 . </p> } 
</body> </style> 
图 4-42 当前 结构 代码 (1) 4-43 CSS 规则 (3) 
@ 保存 =] 前 x 件 ¿ 通 过 浏 览 器 i 览 可 以 看 到 效 HL x 如 BAIE EAP - Vindo. JJ] 

i GO- romcen x| [7 

图 4-44 所 示 。 zo RU FEV IZW IAW 
o - 


通过 分 析 CSS 规则 和 预览 效果 可 知 ,由 于 通配符 中 定 
义 字 体 颜 色 为 红色 ,所 以 影响 了 页 面 所 有 元 素 。 然 而 又 单独 
对 h2 元 素 进行 定义 ,虽然 通配符 选择 已 经 将 字体 设置 为 红 
色 , 但 其 优先 级 较 低 ,被 类 型 选择 符 所 取代 ,所 以 hl 元 素 中 
的 内 容 呈 现 出 字体 颜色 变化 的 效果 。 


2. ID 选择 符 与 类 选择 符 


ID 选择 符 以 “# ”开头 ,类 选择 符 以 “. "开头 。 由 于 每 个 文档 中 元 素 的 id 属性 值 是 唯 
一 的 ,所 以 通过 唯一 的 值 直 接 定 位 该 元 素 ; 类 选择 符 在 一 个 文档 中 可 以 使 用 多 次 ,而 且 可 
以 使 用 在 不 同 的 标签 上 。 

【演练 4-9】 ID 选择 符 与 类 选择 符 。 

O 启动 Dreamweaver CS5 ,创建 空白 XHTML 文档 ,将 鼠标 定位 在 “代码 ”视图 中 ， 
插入 相关 文字 内 容 , 如 图 4-45 所 示 。 

© 在 页 面 项 部 head 区 域 ,使 用 内 部 样式 插入 相关 CSS 规则 ,如 图 4-46 所 示 。 


<body> 
<div id="box 1"> 

z i red">ID 选 择 符 与 类 选择 符 </h1> 

ss="red size22"> 如 果 有 多 个 不 同 的 标签 需要 共享 同一 个 样式 ， 或 者 

#8fs_- E= T BHEE S > T IPE, 就 可 以 通过 类 选择 符 实现 。</B: 

<p> 由 于 每 个 文档 中 元 素 的 id 属性 值 是 唯一 的 ， 所 以 通过 唯一 HEESERETE. </p> 
</div> 
</body> 


HEERES AERE 


4-44 预览 效果 (3) 


4-45 ”当前 结构 代码 (2) 


© 保存 当前 文件 ,通过 浏览 器 预览 可 以 看 到 效果 ,如 图 4-47 所 示 。 

通过 分 析 CSS 规则 和 预览 效果 可 知 , 本 例 中 ID 选择 符 “#box_1” 的 规则 的 名 称 与 网 
页 结构 代码 中 “二 div id 一 "box_1" 二 ”相互 对 应 , 故 该 规则 应 用 在 名 为 “box_1? 的 容器 上 。 

类 规则 “. red” 不 仅 应 用 在 hl 上 ,还 应 用 在 p 元 素 上 ,使 得 标题 和 内 容 均 呈现 红色 。 
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美 选 择 符 与 ID 选择 符 — Windows Inter... 


[e renasce s + x | 
REO HEV BERW IAV 


 Gassasmeen | |i r7 
ID 选择 符 与 类 选择 符 
如 果 有 多 个 不 同 的 标签 需要 共享 同 
<style type="text/css"> 个 样式 ， 或 者 希望 同一 个 标签 在 不 同 
aspi kutaspa TTR 就 可 以 通过 类 
”font-size:22px;/* 设 置 字体 大 小 */ 由 于 每 个 文档 中 元 素 的 id 属性 值 是 唯 _ 的 ， 所 以 通 
#oox 1 1 过 唯一 的 什 丰 接 十 位 该 元 素 
font-family: "WREE"; /* 设 置 字体 类 型 */ 
#7styiey 
图 4-46 CSS 规 则 (4) 图 4-47 预览 效果 (4) 


值得 注意 的 是 ,结构 代码 中 第 一 个 p 元 素 应 用 了 “. red” fll“. size22” 两 个 类 规则 ,使 得 
效果 全 加 呈现 出 既 增 大 字体 ,又 改变 颜色 的 效果 。 


3. 包含 选择 符 与 群 组 选择 符 


包含 选择 符 又 称 后 代 选 择 符 , 因 为 该 选择 符 是 作用 于 某 个 元 素 中 的 子 元 素 ,例如 “hl 
span{color: #06F;)” 规 则 作用 的 范围 是 hl 标签 内 部 的 span 标签 

群 组 选择 符 可 以 对 一 组 不 同 的 标签 进行 相同 样式 的 指派 ,标签 之 间 使 用 逗号 进行 分 
割 , 图 4-48 所 示 的 是 某 网 站 CSS 文档 初始 化 时 的 代码 。 


ol, li, hl, h2, h3, h4, h5, 
, input, p, blockquote, th, td { 


padding:0; 


4-48 CSS 文档 初始 化 时 的 代码 


【演练 4-10】 包含 选择 符 与 群 组 选择 符 。 

Q) 启动 Dreamweaver CS5 ,创建 空白 XHTML 文档 ,将 鼠标 定位 在 “代码 ”视图 中 ， 
搬入 相关 文字 内 容 , 如 图 4-49 所 示 。 

© 在 页 面 项 部 head 区 域 , 使 用 内 部 样式 插入 相关 CSS 规则 ,如 图 4-50 所 示 。 


<style type="text/css"> 
p span 

font-family: "微软 雅 黑 "; 
font-size:30px; 


color:#F00; 
了 3 省 人 过 择 和 与 群 组 选择 符 </h1> } 
<p> 包 合 选 : Ae ia /spssss 因为 该 选择 符 是 hl, p í 
作用 于 某 个 元 系 中 的 子 元 素 。 color:#06F; 
<p> 群 组 选择 符 可 以 对 一 : 前 直射 宗 答 进 行 相同 样式 的 指派。 </p> } 
</body> </style> 
图 4-49 当前 结构 代码 (3) 图 4-50 CSS 规则 (5) 
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© 保存 当前 文件 ,通过 浏览 器 预览 可 以 看 到 效果 ,如 图 4-51 所 示 。 


C 也 含 选择 符 与 琳 组 选择 符 — Windows Internet Exp... . EBR) 
GO rausscewal|x| | 

XEO SED SFV BRAW IAV MW 

ARR &esmustnmeass A-D 


包含 选择 符 与 群 组 选择 符 


nsnsi JP SUPE, manasina 
于 某 个 元 素 中 的 子 元 素 。 


群 组 选择 符 可 以 对 一 组 不 同 的 标签 进行 相同 样式 的 指派 。 


PTZ FEET 


图 4-51 预览 效果 (5) 


通过 分 析 CSS 规则 和 预览 效果 可 知 ,本 例 中 *p span” 规 则 为 包含 选择 符 , 透 过 两 层 标 
签 的 包 右 将 规则 作用 在 span 元 素 上 ,使 得 其 内 部 的 文字 字体 大 小 、 颜 色 和 类 型 发 生变 化 ， 
而 “hl,p” 规 则 为 群 组 选择 符 , 其 含义 是 将 hl 元 素 和 p 元 素 统一 进行 规则 定义 。 


44 商用 案例 一 -使 用 'DV+CSS" 
模式 制作 旅行 社 网 页 


本 节 采 用 “DIV 十 CSS” 模 式 完成 某 旅行 社 的 页 面 设计 ,读者 应 该 在 此 案例 中 着 重 体 
会 网 页 从 构思 到 实现 的 全 过 程 ; 着 重 学 习 页 面 布局 规划 的 方法 ; 着 重 学 习 有 关 CSS 的 相 
关 知 识 。 对 于 案例 中 较为 难以 理解 的 CSS 规则 ,这 里 无 须 过 分 追求 其 含义 , 待 后 续 章 节 
学 习 后 自然 明白 其 中 的 缘由 。 


4.4.1 页 面 规 划 


网 页 制作 的 第 一 步 都 需要 对 页 面 进行 规划 ,由 于 本 案例 仅 制 作 一 个 页 面 ,所 以 这 里 对 
该 页 面 进行 规划 。 

图 4-52 所 示 的 是 该 页 面 的 最 终 效 果 , 从 页 面 整个 布局 来 看 ,页 面 分 为 左右 两 部 分 ,其 
主体 内 容 位 于 整个 页 面 的 右 侧 ,通过 对 页 面 的 仔细 观察 ,以 及 成 熟 的 思考 ,这 里 将 页 面 的 
布局 规划 图 展示 出 来 ,如 图 4-53 所 示 。 

在 示意 图 中 各 区 域 的 布局 是 根据 工作 经 验 规 划 得 出 的 ,读者 通过 系统 的 学 习 后 同样 
可 以 得 到 这 种 能 力 。 示 意图 中 “wrapper” 是 整个 页 面 的 容器 ,用 于 放置 其 他 元 素 ;“left” 
用 于 放置 左 侧 的 banner;“right” 用 于 放置 页 面 主 体 区 域 ,其 中 包括 放置 导航 的 “nav”, 放 
置 内 容 的 “content”, 以 及 放置 友情 链接 的 “footer”。 
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欢迎 来 到 字 泽 国际 旅行社 ! 
阿 联 首 航空 == 
BRAVAR! =: wrapper 
right 
nav 
left 
content 
copyright footer 
图 4-52 页 面 最 终 效果 图 4-53 布局 示意 图 (1) 


4.4.2 实现 过 程 


1. 创建 站 点 


(Q 启动 Dreamweaver CS5 ,执行 “站 点 ”>“ 新 建站 点 "命令 ,显示 “站 点 设置 对 象 ”对 
话 框 ,如 图 4-54 所 示 。 


站 点 设置 对 象 “ch03 商 用 案例 一 一 旅行 社 
x ee Dreamweaver 


| 站 点 通常 包含 两 个 部 分 : 可 在 其 中 存储 和 外 理 文件 的 计 黄 机 上 上 的 本 地 文件 
| 生计 委员 入 作风 Web 上 的 服务 器 上 的 远程 文件 云 . 


| 
| 您 可 以 在 此 处 为 Dreamweaver 站 点 过 笃 本 地 文件 丈 和 名 称 。 
站 点 名 称 : [cho 到 用 案 罗 一 每 和 社 |] 


本 地 站 点 六 件 席 [011) aee rosa a] 65 


图 4-54 设置 创建 的 站 点 


© 在 此 对 话 框 左 侧 列表 中 选择 “站 点 ”选项 ,并 在 右 侧 “站 点 名 称 ” 文 本 框 中 输入 
“ch03 商用 案例 一 一 旅行 社 ”, 然 后 单 击 虱 图 标 按钮 ,为 本 地 站 点 文件 夹 选择 存储 路 径 。 
最 后 , 单 击 “ 保 存 ” 按 钮 ,完成 本 地 站 点 的 创建 。 

© 在 “文件 ”面板 中 站 点 根 目录 下 分 别 创建 用 于 放 管 图 片 的 “images” 文 件 夹 和 放 管 
CSS 文 件 的 “style” 文 件 夹 。 

© 将 所 需 图 片 素材 拷贝 到 站 点 的 “images” 文 件 夹 内 。 


71 


2. 创建 空白 文档 

D 执行 菜单 栏 的 “文件 ”>“ 新 建 "命令 ,显示 “新 建文 档 ” 对 话 框 。 

© 选择 对 话 框 左 侧 的 “空白 页 "类别, 从 “页 面 类 型 "中 选择 “HTML” 类 型 ,然后 在 “ 布 
局 ? 列 中 选择 “无 ?类 型 。 

© 在 “文档 类 型 ?下拉 菜单 中 选择 “XHTML 1.0 Transitional” 选 项 ,如 图 4-55 所 示 。 
最 后 单 击 “ 创 建 "按钮 , 即 可 创建 一 个 空白 文档 。 

@ 将 该 网 页 保存 在 根 目录 下 ,并重 命名 为 “index. html”, 如 图 4-56 所 示 。 


2 WEB , EME 
2 到 洒 考 ， 左 全 位、 标 时 和希 注 


3 列 固定 


MSRM: mL 10 Trawitionnl SW 


ji. ç 01 Transitional 
Pin css 文件 .| 4 O1 Strict 


图 4-55 设置 文档 类 型 


3. 创建 CSS 文档 

D 执行 菜单 栏 的 “文件 ”>“ 新 建 " 命 令 , 显 示 “ 新 建文 档 ” 对 话 框 。 

© 选择 对 话 框 左 侧 的 “空白 页 "类别, 从 “页面 类 型 " 列 中 选择 “CSS” 类 型 ,然后 单 击 
“创建 ”按钮 , 即 可 创建 一 个 CSS 空白 文档 。 

© 将 此 外 部 CSS 文档 保存 在 style 文件 夹 下 ,并 重 命名 为 div. css”, 如 图 4-57 所 示 。 


A Te 
局 dbo3 商 用 案例 一 一 放行 总 | 本 地 视 回 v| [D so3 商 必 案例 一 一 放行 v | +R) v 


olta sla & oo o > e 6|P 
FAS ELJEN 


日 加 站 点 - WA 
m O imge 


€ > 
@ Bm 2012-03-55 18:12 (EZE J 
4-56 ”新 建 空白 网 页 4-57 创建 CSS 文档 
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4. 将 CSS 文档 链接 至 页 面 


© 打开 index. html 文档 ,在 Dreamweaver CS5 中 执行 “窗口 ”>“CSS 样式 ”命令 , 打 
开 “CSS 样式 ”面板 , 单 击 面板 底部 的 甸 图 标 按钮 ,此 时 弹出 “链接 外 部 样式 表 ? 对 话 框 。 

© 在 此 对 话 框 中 , 单 击 “ 浏 览 ?按钮 ,将 外 部 样式 文件 "div. css” 链 接 到 “index. html” 
页 面 中 ,如 图 4-58 所 示 。 

© 此 时 ,软件 界面 显示 两 个 文件 已 经 链接 ,如 图 4-59 所 示 。 用 户 单 击 某 个 文件 ,可 
以 在 这 两 个 文档 之 间 相 互 切换 。 


链接 外 部 样式 表 
文件 /EL 四 : |style/div. css ` 
添加 为 ; G) 6838 Q) 
OAW 
WEW ` 
您 也 可 以 输入 到 号 分 隔 的 媒 件 关 型 列表 EN imi 
Dremweaver 的 范例 样式 表 可 以 帮助 您 起 步 ， CREP div. css 
图 4-58 将 CSS 文档 链接 至 页 面 图 4-59 两 个 文件 已 经 成 功 链接 


5. 搭建 页 面 结构 与 CSS 初始 化 


OD 将 光标 定位 在 “设计 ”视图 中 ,在 “插入 ”面板 的 “常用 ”选项 卡 中 单 击 “ 插 入 Div 标 
签 ” 按 钮 ,弹出 “插入 Div 标签 ”对 话 框 ,在 “插入 ”下 拉 菜 单 中 选择 “在 插入 点 ”选项 ,在 “ID” 
下 拉 列 表 框 中 输入 wrapper, 最 后 单 击 “ 确 定 ” 按 钮 , 即 可 在 页 面 中 插入 wrapper 容器 ,如 
图 4-60 所 示 。 

© 在 “插入 ”面板 的 “常用 ”选项 卡 中 单 击 “ 插 入 Div 标签 ”按钮 ,弹出 “插入 Div 标签 ” 
对 话 框 ,按照 图 4-61 所 示 的 参数 进行 设置 , 即 可 在 wrapper 容器 内 部 插入 left 容器 。 


5: | 在 开始 标签 之 后 M| <div id="wrapper"> v 
m ` 


m: ef ` 


4-60 插入 wrapper 容器 4-61 插入 left 容器 


@ 重复 步 又 加 的 操作 方法 ,按照 图 4-62 所 示 的 参数 进行 设置 , 即 可 在 left 容器 内 部 
插入 copyright 容器 。 

@ 在 “插入 ”面板 的 “常用 ”选项 卡 中 单 击 “ 插 入 Div 标签 ”按钮 ,弹出 “插入 Div 标签 ” 
对 话 框 ,按照 图 4-63 所 示 的 参数 进行 设置 , 即 可 在 left 容器 后 面 插入 right 容器 。 

O 在 “插入 ”面板 的 “常用 ”选项 卡 中 单 击 “ 插 入 Div 标签 ”按钮 ,弹出 “插入 Div 标签 ” 
对 话 框 ,按照 图 4-64 所 示 的 参数 进行 设置 , 即 可 在 right 容器 内 部 插入 nav 容器 。 
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SA [emanez Ml [cav id lett> x 
a | 


m: [eoriet 


ESL] 


图 4-62 插入 copyright 容器 


w [av ie 图 


` 


图 4-63 插入 right 容器 


© 在 “插入 ?面板 的 “常用 ”选项 卡 中 单 击 * 插 入 Div 标签 ”按钮 ,弹出 “插入 Div 标签 ” 
对 话 框 ,按照 图 4-65 所 示 的 参数 进行 设置 , 即 可 在 nav 后 面 插入 content 容器 。 


MA: | 在 开始 标签 之 后 
Bi 


m: [ai 


图 4-64 插入 nav 容器 


Ml [<div ide rieht > 国 


` 


图 4-65 插入 content 容器 


至 此 ,页面 大 面积 简易 布局 已 经 成 型 ,此 时 的 页 面 结构 如 图 4-66 所 示 。 对 于 搭建 页 
面 的 环节 ,读者 既 可 以 仿照 本 例 中 一 次 性 将 整体 结构 搭建 完成 的 做 法 ,还 可 以 边 搭建 边 细 
化 页 面 , 总 之 页 面 的 搭建 工作 一 定 要 根据 布局 示意 图 来 完成 。 最 后 ,切换 到 “div. css” 3X 


档 ,编写 如 图 4-67 所 示 的 页 面 初始 化 规则 。 


<body> 
<div id="wrapper"> 
<div id="left"> 
<div id="copyright"></div> 
</div> 
<div id="right"> 
<div id="nav"></div> 
<div id="content"></div> 
</div> 
</div> 
</body> 


图 4-66 页 面 结构 (3) 


6. 细 化 页 面 


/* 页 面 初 始 化 */ 
html, body, hl, h2, h3, h4 { 
margin: 0; 


padding: 0; 
}/* 页 面 主要 元 票 初始 化 */ 
img 

border: 0; 
}/* 清 除 图 像 边框 */ 


color: #990000; 
font-weight: bold; 
text-decoration: none; 
}/* 定 义 超 链接 默认 样式 */ 
a:hover í 


color: #FF7F00; 
text-decoration: underline; 
}/* 定 义 超 链接 鼠标 县 停 时 样式 */ 
-left { 


float: rigl 
}/* 定 义 向 右 浮动 类 ， 以 后 后 期 使 用 */ 


4-67 页 面 初始 化 规则 


O 根据 页 面 效果 图 得 知 ,整个 页 面具 有 背景 效果 ,这 里 拟 使 用 背景 图 像 平 铺 的 方式 
进行 解决 。 切 换 到 “div. css" 文 档 中 ,创建 如 图 4-68 所 示 的 CSS 规则 。 
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© 再 次 观察 页 面 效果 图 可 知 , 左 侧 *left”" 容 器 顶部 包含 旅行 社 的 名 字 ,容器 底部 包含 
版 权 相 关 内 容 , 因 此 这 里 需要 在 网 页 结构 代码 中 增加 部 分 内 容 才 能 满足 需要 。 将 鼠标 定位 
在 “代码 ”视图 中 ,插入 hl 标签 和 段落 标签 用 于 规范 插入 的 内 容 , 具 体 代 码 如 图 4-69 所 示 。 


<body> 
<div id="wrapper"> 
body ( <div id="left"> 
background: #8E0DOD <h1> 字 泽国 际 旅行 社 </h1> 
url (../images/page_bg.jpg) repeat-x; <div id="copyright"> 
text-align: center; <p>2013 scopy; 字 泽 互联 国际 </p> 
font :12px "WRES", ", Verdana, <p>A11 rights reserved</p> 
</div> 
colo. #565656; </div> 
} /* 设 置 背景 图 像 ， 以 及 定义 整体 字体 类 型 和 颜色 */ <div id="right"> 
#wrapper ( <div id="nav"></div> 
text-align: left; <div id="content"></div> 
margin:0 auto; </div> 
width:788px; </div> 
}/* 定 义 wrapper 容 器 宽度 ， 并 且 居 中 放置 */ </body> 
图 4-68 CSS 规则 (6) 图 4-69 修改 后 的 结构 代码 


@ 切换 到 div. css 文件 中 ,创建 相关 CSS 规则 ,如 图 4-70 所 示 。 
D 保存 当前 文档 ,通过 浏览 器 预览 可 以 看 到 当前 预览 效果 ,如 图 4-71 所 示 。 


宇 泽国 际 旅行 社 


#left { 

width:268px; 

background: url(../images/logo.jpg) 
no-repeat; 

padding-top: 30px; 

float:left; 
) 
#left h { 

text-align: center; 

font: 28px "微软 雅 黑 "， "E", verdana, 
sans-serif; 

color: #6c0505; 

height: 709px; 


#copyright { 
color: white; 


#copyright p { 
margin: 0 lem 0.5em lem; 


图 4-70 CSS 规则 (7) 图 4-71 当前 预览 效果 (1) 


O 通常 使 用 无 序列 表 实现 导航 的 功能 ,这 里 将 鼠标 定位 在 “代码 ”视图 中 ,在 nav 容 
器 内 部 插入 一 组 无 序列 表 , 其 结构 如 图 4-72 所 示 。 

© 切换 到 div. css 文件 中 ,创建 相关 CSS 规则 ,如 图 4-73 所 示 。 保 存 当 前 文档 ,预览 
后 的 效果 如 图 4-74 所 示 。 


7. 主体 页 面 的 实现 


Q 将 鼠标 定位 在 “代码 ”视图 中 ,在 “插入 ?面板 的 “常用 ?选项 卡 中 单 击 “插入 Div 标 

签 按 钮 ,在 “插入 ”下拉 菜单 中 选择 “在 标签 之 后 ”选项 ,并 在 后 方 下 拉 菜 单 中 选择 “一 div 

id 一 "content" 二” 选项 ,在 “ID” 下 拉 列 表 框 中 输入 “contenttop”, 如 图 4-75 所 示 , 即 可 在 
content 容器 内 部 插入 content-top 容器 。 

75 


网 页 设计 与 制作 案例 教程 (HTML+CSS+Dreamweaver) 


left; 


置 右 侧 容器 的 宽度 


<body> 


*/ 


rapper"> 


background: url(../images/header.jpg) 
P 
height: 108px; 
/= 加 载 导 航 所 用 的 背景 图 像 */ 
#nav ul 
margin: 0 
padding: 0 0 


float: 1 
border-right: 
a padding 
"> 联系 我 们 </a></1i> list-style 


olid #A26A6B; 


</div> #nav a 
<div id="content"></div> 
</div> 
</div> 
</body> 


图 4-72 插入 无 序列 表 作 为 导航 Æ 4-73 CSS 规则 (8) 


图 4-74 当前 预览 效果 (2) 


MA Div 标签 


MA: | 在 开始 标签 之 后 mM [<div id=“content“> m 
ES ` 
ID: [eontent-top ` 


图 4-75 插入 content-top 容器 


© 按照 步骤 四 的 方式 ,在 content-top 容器 内 部 插入 content-bot 容器 ,此 时 页 面 结构 
如 图 4-76 所 示 。 
© 切换 到 div. css 文件 中 ,创建 相关 CSS 规则 ,如 图 4-77 所 示 。 


background: url( 


background: ur 


background: 
padding: 36p 


at bottom left; 


</body> 


图 4-76 页 面 结构 (4) 图 4-77 CSS 规 则 (9) 
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@ 将 鼠标 定位 在 “代码 ”视图 中 的 content-bot 容器 内 部 ,插入 标题 标签 .图 像 标签 , 
以 及 段落 标签 用 于 盛 放 文字 内 容 , 具 体 结构 代码 如 图 4-78 所 示 。 

© 切换 到 div. css 文件 中 ,创建 相关 CSS 规则 ,如 图 4-79 所 示 。 保 存 当前 文档 ,预览 
后 的 效果 如 图 4-80 所 示 。 


#content h2 
font: 14px; 


'ontent-top"> #660505; 
<div id="content-bot"> font-weight: normal; 
<h2> 欢 迎 来 到 <strong> 字 泽国 际 旅行 社 ! </strong></h2> font-size: 18px; 
<PERR E] </p> ) 
<o SEE] </p> -bot img 
<img src="images/tuijian.jpg" width="132" height="90" class="left"/> margin-right:10px; 
<h3> 特 别 推荐 </h3> margin-bottom: 10px; 


#content-hr ( 
clear: both; 
height: 43px; 
background: bottom left 
url(../images/body_hr.jpg) 


<div id="content-hr"> </div> 


</div> no-repeat; 
</div> margin: 10px -39px; 
</div> ) 


图 4-78 插入 相关 标签 盛 放 文 字 内 容 图 4-79 CSS 规 则 (10) 


无 标本 文档 - Vindovs Internet Explorer 
GO lereeenssme x |) 

ZË MED PEV REW IRD FMV 

请 收 训 天 Grets Ñ D- ©&®- mmv- 220- IAV- @- 


欢迎 来 到 宇 泽国 际 旅行 社 ! 


字 泽 国际 旅行 社 作为 中 国 第 一 家 旅行 社 同 共和 国 一 起 诞生 ,与 共和 国 一 道成 长 。60 
年 幸 ， 我 们 以 满足 客户 需求 为 己任 , 以 诚信 经 营 为 准则 , PLG 


SEA ,我 们 汪 剑 感 数 ! 展 痊 示 丰 的 发 展 条 路 , 我 们 信心 百 信 。 我 们 
如 喷 往 的 信任 和 支持 之 下 ,中 藤 一 定 能 等 短视 群雄 ， 成 为 中 国 坟 游行 业 


特别 推荐 


1 BREH SAREN : ORNER -RE 

[NO tuee; EVERI EEEN 海南 四 大 绝色 海 
E; EREN, PEDE RE-USE 
还 有 免税 店 的 守 仇 . 


2, W : ah mipi. —m tuwa esa (R-RATA 
-manwocamma. 


衣 菜 体验 、 鲜 吉美 味 要 口 的 农家 鱼 声 吕 涯 ; 独特 的 天 堂 并 生 
时 的 东南 亚 风味 餐 、 吉 祥 的 南山 素 帝 


4、 超 全 路 送 ; 3826285598 ; LL: TONE ; SENE : 我 村 特别 SI 人 本 
送 让 你 浆 秽 度假 ， 非 一般 旅 游 己 程 ! 高 级 环 保 餐 具 : 让 您 做 一 位 环保 人 士 的 同时 不 
担心 健康 问题 . 


5、 贿 送 每 日 营养 西式 自助 早餐 份 ; 贴 送 2 人 特色 小 鱼 按 新 (30 分钟 】 ; MERE 
全 券 100 元 ; MEHNATNI IRK BEMS- TUE ZINE 
接送 ; AMATERE SA TRNRE L ( 电脑 自 备 ) 。 


图 4-80 当前 预览 效果 (3) 


© 在 content-hr 容器 后 面 插入 footer 容器 ,并 在 其 内 部 使 用 无 序列 表 创 建 一 组 内 
容 , 用 于 放置 友情 链接 ,如 图 4-81 所 示 。 
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@ 切换 到 div. css 文件 中 ,创建 相关 CSS 规则 ,如 图 4-82 所 示 。 保 存 当前 页 面 文档 ， 
通过 浏览 器 预览 可 以 发 现 本 页 面 的 所 有 布局 已 经 全 部 实现 。 


<div id="content"> 
<div id="content-top"> 
<div id="content-bot"> 


> 中 国 青年 旅行 社 </a></1i> 
> 康辉 旅行 社 </a></1i> 


<li><a hr > 中 国 和 平 国际 旅行 社 </a></1i> footer { 
<li><a hr. > 携程 旅行 网 </a></1i> margin:0 -35px; 
<li><a href="#"> 去 哪 网 </a></1i> } 
</ul> footer ul li 1 
</div> display:inline; 
</div> list-style:none; 
</div> margin-right :10px; 
</div> 
4-81 页 面 结构 (5) 4-82 ”CSS 规则 (11) 
1. 实 训 要 求 


参考 实 训 源 文件 仔细 分 析 页 面 布局 ,使 用 “DIV 十 CSS” 的 模式 制作 网 页 ,着 重 体 会 网 
页 制作 的 全 过 程 ,并 简单 记忆 CSS 规则 。 


2. 过 程 指导 


D 首先 ,打开 源 文件 ,观察 该 网 页 通过 浏览 器 预览 后 的 效果 。 然 后 ,根据 自己 的 理解 
尝试 规划 页 面 布局 。 最 后 ,查看 源 文件 的 页 面 结构 布局 ,与 自己 的 布局 思路 加 以 对 比 , 学 
习 其 中 的 布局 思想 。 

@ 启动 Dreamweaver CS5, 并 创建 站 点 。 在 站 点 内 创建 “images" 文 件 夹 和 “style” 文 
件 夹 。 分 别 创建 空白 网 页 文档 和 外 部 CSS 文档 ， [wrapper 
然后 将 两 者 链接 起 来 。 EE menu 

© 根据 需要 设计 规划 页 面 整个 布局 ,示意 图 = 
如 图 4-83 所 示 。 将 光标 定位 在 设计 视图 中 ,在 空 
白 网 页 内 部 创建 wrapper 容器 ,切换 到 CSS 文件 ， 
输入 相应 的 规则 。 

© 参照 布局 示意 图 ,在 wrapper 容器 内 部 依 div 
次 创建 header 容器 .content 容器 和 footer 容器 。 

O 根据 示意 图 中 各 容器 之 间 的 关系 ,参照 上 
述 步骤 ,将 页 面 中 其 他 div 容器 制作 出 来 。 footer 

@ 切换 到 CSS 文档 中 ,依次 创建 对 应 的 CSS 
规则 。 图 4-83 布局 示意 图 (2) 
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D 保存 所 有 文件 ,在 浏览 器 中 预览 并 修改 ,最 终 效果 可 参照 图 4-84。 
oD Yge - ss -reon en = 
— ...L...< 


春意 卧室 12 款 最 受 欢迎 春季 床 品 推荐 装修 论坛 攻略 关于 梅雨 装修 的 那些 事 
sas sar a -ra 


4-84 ”最 终 效 果 


46 7J 题 


1. 什么 是 站 点 ? 简 述 如 何 创建 本 地 站 点 。 

2. CSS 的 样式 类 型 有 几 种 ? 分 别 是 什么 ?其 作用 范围 有 何 区 别 ? 

3. 什么 是 CSS 的 盒 模型 ? 

4. 当 两 个 元 素 的 外 边 距 相遇 时 ,这 两 个 元 素 之 间 的 外 边 距 会 发 生 什么 效果 ? 这 种 效 
果 影 响 两 个 容器 的 宽度 或 高 度 吗 ? 

5. ID 选择 符 、 类 选择 符 和 类 型 选择 符 之 间 有 什么 区 别 和 联系 ? 

6. 熟悉 Dreamweaver CS5 的 工作 环境 ,并 在 本 地 硬盘 内 创建 名 为 “我 的 第 一 个 站 点 ” 
的 站 点 ,在 其 中 创建 名 为 “images” 和 “style” 的 文件 夹 ; 在 站 点 内 部 创建 和 index. html” 和 
“div. css” 文 件 , 并 将 这 两 个 文件 链接 起 来 ; 向 站 点 “image” 文 件 夹 内 复制 多 张 图 像 , 练 习 
移动 .删除 .粘贴 等 操作 。 

7. 观察 图 4-85 所 示 的 网 页 ,分 析 其 中 的 布局 ,运用 本 章 知识 将 该 网 页 制作 出 来 。 

8. 分 析 图 4-86 所 示 的 网 页 ,采用 “DIV 十 CSS” 的 模式 制作 该 网 页 。 
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ET 


IMD ARU PFO MAW IAD upo = = 
-0 os- mav- sto- IAQ 


g) 


运动 让 宝宝 大 脑 "不 简单 " 


"生命 在 于 运动 "是 一 句 我 们 从 小 听 到 大 的 话 。 现 在 ， 大 量 研究 发 现 ， 运 动 不 仅 可 以 让 四 
肢 "发 过"， 更 会 让 你 的 头脑" 不 简单 <。 如 果 你 还 跨 殖 不 决 ， 就 看 看 下 面 的 文章 到， 鞠 国 量 权 
威 的 科学 家 和 医生 会 给 你 一 个 开始 并 和 坚持 下 去 的 至 由 。 科 学界 章 已 发 现 ， 运 动 可 以 让 骨 肯 更 
健壮 ， 还 可 以 预防 许多 疾病 。 最 近 它 对 大 鸯 的 益处 也 被 据 示 出 来 。 早 在 古 项 诸 时 代 ， 人 们 就 


提出 了 "运动 和 学 习 同样 重要 "的 口号 ， 如 今 从 开发 智力 的 角 座 来 看 ， 这 见解 确 有 一 定 的 道 
z. 


à ATRUNA, MERER. WENEH EA 
劲 ， 大 你 至 少 要 坚持 不 懈 地 运动 50 年 ! 此 外 ， 还 有 研究 发 现 ， 运 动 一 下 将 有 助 于 集中 精 
h. 平静 心情 ， 就 像 缀 用 少量 抗 折 部 药 百 优 解 或 中 枢 神经 兴奋 剂 利他 林 一 样 


Copyright © 2011 XXX Al Rights Reserved 


图 4-86 习题 8 对 应 图 
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口 掌 握 图 像 的 常见 格式 和 插入 图 像 的 方法 。 

口 熟练 掌握 CSS 控制 图 像 的 相关 属性 。 
口 熟 练 掌握 图 文 混 排 的 实现 方法 。 

口 能 够 使 用 Photoshop 的 切片 功能 输出 所 需 图 像 。 


图 像 在 网 页 中 有 着 举足轻重 的 作用 ,合理 的 图 像 设置 可 以 提高 网 站 的 美观 和 实用 性 ， 
增加 网 站 的 观赏 性 和 提高 用 户 的 体验 度 。 本 章 主要 从 搬入 图 像 的 基本 操作 入 手 , 结 合 常 
见 的 图 像 版 式 ,重点 对 CSS 控制 图 像 的 相关 知识 加 以 阐述 ,使 读者 能 够 掌握 从 图 像 效 果 
图 到 网 页 成 品 之 间 的 全 过 程 。 


51 使 用 图 像 丰 富 页 面 


图 像 不 仅 要 好 看 ,而且 还 要 在 保证 图 像 质量 的 情况 下 尽量 缩小 图 像 的 体积 ,在 网 页 中 
经 常 使 用 的 图 像 有 三 种 格式 : JPEG .GIF 和 PNG。 

一 般 来 说 ,图 像 颜色 较 少 .色调 均匀 ,或 者 包含 透明 背景 的 图 像 最 好 将 它 处理 为 GIF 
图 像 格 式 ; 如 果 是 一 些 在 网 页 中 处 在 重要 位 置 , 且 色彩 丰富 的 图 像 ,应 该 使 用 JPEG 图 像 
格式 。 此 外 ,PNG 格式 是 一 种 兼 具 JPEG 和 GIF 优势 的 无 专利 权限 制 的 格式 ,包括 对 索 
引 色 、 灰 度 、 真 彩色 图 像 以 及 alpha 通道 透明 度 的 支持 ,已 经 广泛 应 用 于 网 页 设计 中 。 


5.1.1 插入 图 像 的 方法 


在 Dreamweaver CS5 中 插入 图 像 的 方法 极为 简单 ,但 插入 过 程 中 有 相关 参数 需要 学 
习 , 这 里 以 示例 的 形式 讲解 在 网 页 中 插入 图 像 的 方法 。 

【演练 5-1】 插入 图 像 。 

© 启动 Dreamweaver CS5 ,创建 空白 XHTML 文档 ,将 光标 定位 在 需要 插入 图 像 的 
位 置 ,在 “插入 ”面板 的 “常用 "类别 中 , 单 击 “ 图 像 : 图 像 * 图 标 ,或 者 执行 “插入 ”一 “图 像 ” 
命令 。 

© 弹出 “选择 图 像 源 文件 ”对 话 框 ,如 图 5-1 所 示 。 在 该 对 话 框 中 ,选择 需要 的 图 像 ， 
右 侧 预览 窗口 即刻 显示 预览 效果 , 单 击 “* 确 定 ? 按 钮 即 可 插入 一 张 图 像 。 

© 在 将 图 像 插 入 到 页 面 后 ,设计 者 如 果 在 “首选 参数 ”的 “辅助 功能 ”选项 卡 中 选择 了 


网 页 设计 与 制作 案例 教程 (HTML+CSSs+Dreamweaver) 


选择 图 像 源 文件 
选择 文件 名 自 : 加 文件 系统 
Ossa 


SW QD: [D insees 


文件 名 如 :|001 jpe ] 100 x 100 JPEG, 4 K / 1 
文件 类 型 四 ”| 图 月 文件 G cF. ie jpeg. w. pnet | 


w: images/001. jpg ] 
相对 于 。 më — v| ao SAB hal 


在 站 点 定义 中 更 改 黑 认 的 链接 相对 于 


图 5-1 “选择 图 像 源 文件 对话 框 


“图 像 " 复 选 框 ,将 会 弹出 如 图 5-2 所 示 的 对 话 框 。 

@ 在 此 对 话 框 中 ,“ 替 换文 本” 指 的 是 用 户 需 要 为 图 像 输入 一 个 名 称 或 一 段 简短 描述 
(50 个 字符 左右 );“ 详 细 说 明 ” 用 于 设置 当 用 户 单 击 图 像 时 所 显示 的 文件 的 位 置 。 这 里 
可 以 不 做 任何 设置 , 单 击 取 消 ” 按 钮 后 ,图 像 即 刻 显 示 在 文档 中 。 

需要 特别 说 明 的 是 ,如 果 插 图 的 图 像 不 在 当前 站 点 ,系统 则 会 弹出 询问 对 话 框 ,如 
图 5-3 所 示 。 在 该 对 话 框 中 , 单 击 “ 是 ”按钮 ,将 弹出 “复制 文件 为 "对话 框 ,选择 正确 的 路 
径 后 , 单 击 “ 保 存 ” 按 钮 , 即 可 将 站 点 以 外 的 图 像 复 制 到 当前 站 点 中 。 


图 像 标签 辅助 功能 属性 


te 文件 位 于 让 点 , Da RS 
WMR: hatp:// = D SSES ESA. 
PUNE wr 


Pu TARNA ， MEA 您 愿意 将 该 文件 复制 到 根 文件 夹 中 吧 ? 


图 5-2 “图 像 标签 辅助 功能 属性 ”对 话 框 图 5-3 询问 对 话 框 


© 选择 刚才 搬入 的 图 像 , 按 下 组 合 键 Ctrl 十 F3, 打 开 如 图 5-4 所 示 的 “属性 ”面板 。 
在 此 面板 中 ,读者 可 以 对 图 像 的 大 小 、 位 置 . 超 链接 替换 文本 等 相关 属性 进行 设置 。 


me 
w me. a RQ) O | BZ) sas Q O wn ~ mos ~ ə 
B 


] šono eoi oo m zes z š 
amw — smo BEW mo Maci 
R] OOV amo mO oook x s 


图 5-4 图 像 属性 面板 


面板 中 主要 参数 的 含义 如 下 。 
° ID: 用 于 设置 图 像 的 名 称 , 以 便 在 用 脚本 撰写 语句 时 引用 该 图 像 。 
° 宽 和 高 : 图 像 的 宽度 和 高 度 ,以 像素 表示 。 
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。 源 文件 : 指定 图 像 的 源 文件 。 
。 链接 : 用 于 设置 单 击 图 像 时 的 超 链接 。 
。 蔡 换 : 为 图 像 输入 一 个 简短 的 描述 性 语句 , 当 鼠 标 悬 停 在 该 图 像 上 时 ,就 显示 该 
输入 的 信息 。 
° 编辑 : 使 用 指定 的 外 部 编辑 器 打开 选 定 的 图 像 并 编辑 。 
° 地 图 : 用 于 创建 客户 端 图 像 地 图 。 
° 垂直 边 距 和 水 平 边 距 : 沿 图 像 的 边 添加 边 距 , 以 像素 表示 。 
。 对齐 : 对 齐 同一 行 上 的 图 像 和 文本 。 


5.1.2 鼠标 经 过 图 像 


鼠标 经 过 图 像 所 展现 的 效果 是 : 当 鼠 标 悬 停 在 图 像 上 时 ,会 显示 预先 设置 好 的 另 一 
幅 图 像 ,而 当 鼠 标 移 开 时 ,又 恢复 为 第 一 幅 图 像 。 这 种 实现 图 像 交 替 变化 的 本 质 ,其 实 是 
软件 自动 添加 了 一 段 JavaScript 代码 而 实现 的 。 

从 实际 工作 经 验 来 讲 ,插入 鼠标 经 过 图 像 并 不 是 解决 图 像 交 蔡 效 果 的 最 佳 方法 ,要 实 
现 图 像 交替 变换 的 效果 ,可 以 使 用 CSS 中 的 伪 类 解决 ,对 于 如 何 使 用 伪 类 实现 类 似 效果 ， 
后 续 章 节 将 会 详细 讲解 ,这 里 仅 对 鼠标 经 过 图 像 的 制作 方法 加 以 说 明 。 

【演练 5-2】 鼠标 经 过 图 像 。 

© 启动 Dreamweaver CS5 ,创建 空白 XHTML 文档 ,将 光标 定位 于 要 插入 鼠标 经 过 
图 像 的 地 方 。 

© 在 “插入 ”面板 的 “常用 ”类 别 中 , 单 击 “ 图 像 : 鼠标 经 过 图 像 按 钮 ,或 者 执行 “ 插 
人 ”一 “图 像 对 象 ”>“ 鼠 标 经 过 图 像 " 命 令 , 这 时 弹出 “插入 鼠标 经 过 图 像 ” 对 话 框 。 

O 在 该 对 话 框 中 光 图 像 名 称 ” 用 于 设置 鼠标 经 过 图 像 的 名 称 ;“ 原 始 图 像 ” 用 于 设置 
页 面 加 载 时 要 显示 的 图 像 ;“ 鼠 标 经 过 图 像 ” 用 于 设置 鼠标 指针 滑 过 原始 图 像 时 要 显示 的 
图 像 ;“ 按 下 时 ,前 往 的 URL” 用 于 设置 当 单 击 图 像 时 要 打开 的 文件 路 径 ,如 图 5-5 所 示 。 


插入 鼠标 经 过 图 像 


Image 


[images/002. png 


inages/003. png 


图 5-5 “插入 鼠标 经 过 图 像 " 对 话 框 


@ 设置 完成 后 , 单 击 “确定 ”按钮 , 即 可 插入 鼠标 经 过 图 像 。 通 过 浏览 器 预览 可 以 看 
到 效果 ,如 图 5-6 和 图 5-7 所 示 。 
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人 插入 叱 标 经 过 图 像 ... MOR 


GO [e rusiasrsvun s 


文件 四 SED FEV kE” 


图 5-6 鼠标 未 经 过 时 的 图 像 显 示 图 5-7 鼠标 经 过 时 的 图 像 显 示 


5.1.3 图 像 的 热点 区 域 


热点 区 域 指 的 是 通过 在 图 像 中 绘制 一 个 或 多 个 特定 的 区 域 (矩形 、 圆 形 或 其 他 形状 ) 
而 创建 的 链接 。 当 访问 者 单 击 这 些 热点 区 域 后 ,就 会 跳 转 到 热点 所 链接 的 不 同 页 面 上 。 
图 像 上 如 果 创 建 了 热点 ,热点 就 成 为 图 像 的 一 部 分 , 当 改 变 图 像 的 大 小 时 ,图 像 中 所 有 热 
点 也 会 发 生 相应 的 变化 。 


【演练 5-3】〗 图 像 的 热点 区 域 。 
O 启动 Dreamweaver CS5 ,创建 空白 XHTML 文档 ,在 页 面 中 插入 一 幅 图 像 。 


© 选中 该 图 像 ,执行 “窗口 >“ 属 性 ”命令 ,打开 “属性 ”面板 。 在 该 面板 上 , 单 击 圆 形 
Mes LA O ,然后 在 图 像 上 绘制 热点 区 域 ,如 图 5-8 所 示 。 


€... 2011) 一 机 核 \ 攻 套现 站 \cho4\eho4-3 画像 的 热点 区 域 htal CXHTXL)* -Ox 


body) @apillsp> Karea) NA IOO — | S19 x 40Sv 49 K / 2 Ë Unicode (| 


图 5-8 绘制 热点 区 域 
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@ AHERE VEFE“ R FE” T rh 0948 ERUS TR [x | ,选中 刚才 绘制 的 圆 形 热点 
域 ,此 时 “属性 ”面板 显示 为 热点 的 属性 ,如 图 5-9 所 示 。 在 此 面板 中 ,为 “链接 "和 “目标 ” 
参数 进行 相应 的 设置 ,然后 按 下 组 合 键 Ctrl 十 S 保 存 当 前 页 面 。 

© 最 后 ,在 浏览 器 中 预览 , 当 鼠 标 悬 停 在 热点 区 域 时 鼠标 变 为 手 形 ,如 图 5-10 所 示 ， 
单 击 后 立刻 跳 转 到 指定 的 页 面 。 


属性 
到 热点 WE http //wrr baidu com Ee 
BEW tlak R ~ EaD 我 是 百度 x] 
地 图 no 
RJDOOY 


图 5-9 设置 热点 属性 


J e rinpasgreunsgse v| o x |/ 
Xie REO SEV RAW IAV 帮助 0D 


RERE ØRET A-D O @ - mv- 220- 


http: //wev baidu con/ 


图 5-10 鼠标 悬 停 在 热点 区 域 时 的 效果 


52 使 用 CSS 控 制图 像 


图 像 在 网 页 中 主要 起 到 美化 修饰 的 作用 ,但 绝 大 多 数 的 情况 下 需要 对 图 像 进行 多 方 
面 的 控制 ,这 就 需要 CSS 的 有 力 配 合 才能 轻松 实现 。 本 节 向 读者 介绍 有 关 控 制图 像 的 
CSS 规则 ,希望 读者 能 够 强加 练习 ,熟练 掌握 CSS 控制 图 像 的 方法 。 


5.2.1 CSS 控制 图 像 背景 


背景 属性 (background) 是 CSS 中 使 用 率 很 高 . 且 非 常 重 要 的 属性 。 在 网 页 设计 中 ， 
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无 论 是 单一 的 纯色 背景 ,还 是 加 载 的 背景 图 片 ,都 能 够 给 整个 页 面 带 来 丰富 的 视觉 
效果 。 
在 CSS 样式 中 有 6 个 标准 背景 属性 和 多 个 可 选 参数 , 详 见 表 5-1。 


表 5-1 背景 属性 
属 性 说 明 
background 简写 属性 ,作用 是 将 背景 属性 设置 在 一 个 声明 中 
background-color 设置 元 素 的 背景 颜色 
background-image 把 图 像 设置 为 背景 
background-position 设置 背景 图 像 的 起 始 位 置 
background-repeat 设置 背景 图 像 是 否 重复 ,以 及 如 何 重复 
background-attachment 设置 背景 图 像 是 否 固定 或 者 随 着 页 面 的 其 余部 分 滚动 


1. 背景 色 与 背景 图 


背景 色 (background-color) 和 背景 图 (background-image) 是 最 基本 的 两 个 属性 ,用 于 
分 别 加 载 单纯 的 颜色 背景 和 图 像 背景 。 当 网 页 某 元 素 同 时 具有 background-image 属性 
和 background-color 属性 ,那么 background-image 属性 将 优先 于 background-color 属性 ， 
也 就 是 说 背景 图 片 永远 覆盖 于 背景 色 之 上 。 

【演练 5-4】 背景 色 与 背景 图 。 

(Q) 启动 Dreamweaver CS5, 并 创建 站 点 。 在 站 点 内 创建 “images” 文 件 夹 , 并 把 制作 
好 的 图 像 放置 其 中 。 

© 创建 空白 XHTML 文档 ,在 其 中 插入 名 为 “header” 的 div 容器 ,此 时 结构 代码 如 
图 5-11 所 示 。 

© 将 鼠标 定位 在 “代码 ”视图 ,在 本 页 面 head 区 域 创建 相关 CSS 规则 ,如 图 5-12 
所 示 。 


<style type="text/css"> 


background-color:#813e38;/* 背 景色 */ 

background-image: url (images/005.jpg) ;/* 背 景 图 */ 
background-repeat:no-repeat;/*} * 
background-position:center topi/* 青 景 水 平 居中 ， 垂 直 居 项 对 齐 */ 


#header 
width: 900px; 

height:220px; 

margin:0 auto; /+ 设置 该 容器 水 平 居中 */ 
background-image:url(images/006.png) ; /* 增 加 透明 背景 的 图 像 */ 
background-repeat :no-repeat; 

font-size: 40px; 


<body> font-family: "WREE"; 
<div id="header"> 背 景色 与 背景 图 的 应 用 </div> } 
</body> </style> 
图 5-11 结构 代码 5-12 CSS 规 则 (1) 


@ 保存 当前 页 面 ,通过 浏览 器 预览 可 以 看 到 效果 ,如 图 5-13 所 示 。 

本 例 中 为 body 元 素 和 header 元 素 分 别 加 载 了 背景 图 。 对 于 body 元 素来 说 ,除了 添 
加 了 背景 图 属性 ,还 使 用 了 背景 色 属 性 ,由 于 背景 色 所 设置 的 颜色 与 图 像 基 色相 同 , 所 以 
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预览 后 的 效果 给 人 以 “融合 一 体 ” 的 感觉 ,这 种 处 理 方式 ,经 常用 于 有 背景 图 和 渐变 色 的 网 
页 中 ; 对 于 header 元 素来 说 ,由 于 加 载 的 是 具有 透明 背景 的 PNG 格式 图 像 ,所 以 预览 后 
能 够 实现 图 像 相 互生 加 的 效果 ,这 种 处 理 方法 ,经 常用 于 网 页 的 细节 美化 。 


5-13 ”预览 效果 (1) 


2. 背景 重复 


背景 重复 (background-repeat) 属 性 的 主要 作用 是 设置 背景 图 片 以 何 种 方式 在 网 页 中 
显示 。 通 过 背景 重复 ,设计 人 员 使 用 很 小 的 图 片 就 可 以 填充 整个 页 面 ,有 效 地 减少 图 片 字 
节 的 大 小 。background-repeat 属性 有 5 种 平 铺 方 式 供 用 户 选 择 , 详 见 表 5-2。 


表 5-2 背景 重复 
重复 模式 说 明 
background-repeat: repeat; 默认 值 ,在 水 平和 垂直 方向 平 铺 
background-repeat: no-repeat; 不 进行 平 铺 , 图 像 只 展示 一 次 
background-repeat: repeat-x; 水 平方 向 平 铺 ( 沿 x 轴 ) 
background-repeat: repeat-y; 垂直 方向 平 铺 ( 沿 y 轴 ) 
background-repeat: inherit; 继承 父 元 素 的 background-repeat 属性 


【演练 5-5】 图 像 重复 。 

(Q 启动 Dreamweaver CS5, 并 创建 站 点 。 在 站 点 内 创建 “images” 文 件 夹 , 并 把 制作 
好 的 图 像 放置 其 中 。 

© 创建 空白 XHTML 文档 ,在 其 中 插入 多 个 div 容器 ,并 应 用 同一 个 “. box” 类 ,此 时 
页 面 结 构 如 图 5-14 所 示 。 

O 将 鼠标 定位 在 “代码 ”视图 ,在 本 页 面 head 区 域 创建 相关 CSS 规则 ,如 图 5-15 所 
示 。 仔 细 观 察 CSS 代码 可 知 ,这 里 定义 了 box 类 分 别 应 用 在 4 个 div 容器 上 ,而 每 个 容器 
由 于 不 同 的 图 像 重复 形式 而 分 别 定义 。 

@ 保存 当前 页 面 , 通 过 浏览 器 预览 可 以 看 到 效果 ,如 图 5-16 所 示 。 
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<style type="text/css"> 
-box { 
width:195px; 
height:195px; 
border: 1px #F90 solid; 
float:left; 
margin: 2px; 


ox 1 { 
background-image: url(images/007.png) ; 
background-repeat: no-repeat;/* 不 重复 */ 


background-image: url (images/008.png) 
background-repeat :repeat;/* 水 平 、 ENEN / 


background-image: url (images/009.gif); 
background-repeat:repeat-x;/* 沿 水 平方 向 重复 */ 
<body> 
<div id="box_1" 
<div id="box_2" 


ox"></div> 4 
w ox"></div> background-image: url(images/010.png) ; 
<div id="box _3" ox"></div> background-repeat: repeat-y; /* 沿 垂直 方向 重复 */ 
<div id="box 4" box"></div> 

</body> </style> 


图 5-14 当前 页 面 结构 (1) 图 5-15 CSS 规则 (2) 


CERES Windows Internet Explorer 
GO- Brwneascen v| ++ || x 

XEO RAD EEV wQ IAD HDW 
ARER ERRES 


水 平 、 垂 直 均 重复 


水 平 重复 垂直 重复 


5-16 RAARO) 


5.2.2 图 像 在 超 链 接 方面 的 应 用 


单纯 的 超 链接 外 观 已 经 不 能 满足 追求 视觉 体验 的 访问 者 了 ,目前 大 部 分 网 站 或 多 或 
少 的 都 使 用 图 像 美化 超 链 接 的 外 观 。 对 于 超 链接 来 说 ,要 想 增 加 美化 效果 ,无 非 是 增加 鼠 
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标 悬 停 时 状态 的 效果 ,之 前 已 经 介绍 了 通过 插入 鼠标 经 过 图 像 的 方法 实现 这 种 效果 的 方 
法 ,而 本 节 采 用 CSS 中 伪 类 来 解决 这 个 问题 。 为 了 更 加 清晰 地 说 明 具 体 应 用 过 程 ,这 里 


以 示例 的 形式 进行 讲解 。 
【演练 5-6】 图 像 超 链接 。 


O 提前 准备 多 组 大 小 相同 ,内 容 有 差别 的 图 像 ,作为 鼠标 悬 停 在 超 链 接 时 图 像 前 后 
变换 的 效果 。 启 动 Dreamweaver CS5, 并 创建 站 点 。 在 站 点 内 创建 “images” 文 件 夹 ,并 把 


制作 好 的 图 像 放置 其 中 。 


加 创建 空白 XHTML 文档 ,在 页 面 中 创建 一 组 无 序列 表 , 作 为 盛 放 超 链接 的 容器 ， 


此 时 页 面 结构 如 图 5-17 所 示 。 


<body> 
<ul class="hdrlink"> 


<li class="home"><a href="#" title="HOME"></a></1i> 


<li class="quotes"><a hre: 


<li class="search"><a href="#" 


"title="QUOTES"></a></1i> 
="SEARCH"></a></1i> 


<li class="contact"><a href="#"title="CONTACT"></a></1i> 


</ul> 
</body> 


图 5-17 当前 页 面 结构 (2) 


© 在 本 页 面 head 区 域 创建 相关 CSS 规则 ,如 图 5-18 和 图 5-19 所 示 。 


ul.hdrlink li.home a { 
background:url (images/home-butt .gif) no-repeat; 


} 


ul.hdrlink li.quotes a 
background:url (images/quotes.gif) no-repeat; 


“Kuy asi EARR 状态 时 


的 背景 图 像 */ 


.hdrlink li.quotes a:hover 1 
ul.hdrlink background:url (images/quotes-over.gif) no-repeat; 
padding:0; }/* 设 置 quotes 在 超 : E 5545208 RE / 


margin:0; ul.hdrlink li.search a { 


list-style:none; 
1 7* 清 除 无 序列 表 默 认 外 观 */ 
ul.hdrlink li í 
float:left; 
margin-right:3px; 
}/* 设 置 列表 项 横向 浮动 ， 使 之 模 向 排列 */ 
ullial 
display:block; 
height: 69px; 


background: url (images/search.gif) no-repeat; 
}/* 设 置 search 在 超 链 的 背景 图 像 */ 
ul.hdrlink 1i.search ri 

background: url (i: earch-over.gif) no-repeat; 
1 “8 E searchiE EREEREER RR / 
ul.hdrlink li.contact a í 

background: url(images/contact-gif) no-repeat; 
}/* 设 置 contact 在 超 链 接 默认 状 : 时 的 彰 果 图 像 */ 


ul-hdrlink li.contact 


width: 67px; baokgroundsus1 (imagas/contact-over :gif). no-repeat; 
} }/* 设 置 contact 在 超 链接 夺 停 状态 时 的 背景 图 像 */ 
图 5-18 定义 无 序列 表 图 5-19 设置 图 像 超 链接 相关 规则 


仔细 观察 结构 代码 和 CSS 规则 的 内 容 , 这 
里 主要 为 不 同类 的 a 元 素 增 加 了 背景 图 像 , 并 
且 该 图 像 的 重复 类 型 为 “无 重复 ”, 对 于 a 元素 
的 伪 类 “a:hover” 则 应 用 了 另外 一 幅 大 小 相同 
内 容 不 同 的 图 像 ,使 得 鼠标 在 基 停 在 超 链接 上 
时 ,会 自动 变化 背景 图 像 , 从 而 达到 图 像 交 替 的 
目的 。 

@ 保存 当前 页 面 , 通 过 浏览 器 预览 可 以 看 
到 效果 ,如 图 5-20 所 示 。 


C ARESE 

[e renesans x P: 
Xe REO FEV BERW IAV BMW 

k LRR i 


— 
SY 


Windovs Internet Explorer EBR) 


图 5-20 ”预览 效果 (2) 
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5.2.3 CSS 在 图 文 混 排版 式 中 的 应 用 


图 文 混 排 的 版 式 在 网 页 中 非常 常见 ,无 论 是 正文 内 容 ,还 是 某 一 板块 的 布局 一 定 能 够 
用 到 图 文 混 排 的 知识 。 由 于 图 文 混 排 所 使 用 的 图 像 与 正文 有 密切 的 联系 ,所 以 图 文 混 排 
的 核心 就 是 让 图 像 脱 离 文本 流 ,使 得 文字 得 以 环绕 排列 。 为 了 更 加 明晰 地 阐述 图 文 混 排 
的 核心 思想 ,这 里 采用 示例 的 形式 进行 讲解 。 


1. 图 文 混 排 


【演练 5-7】 图 文 混 排 。 

O 启动 Dreamweaver CS5, 并 创建 站 点 。 在 站 点 内 创建 “images” 文 件 夹 , 并 把 制作 
好 的 图 像 放置 其 中 。 

© 创建 空白 XHTML 文档 ,在 页 面 中 创建 合理 的 页 面 结构 用 于 放置 图 像 和 文字 ,如 
图 5-21 所 示 。 由 于 段落 文字 内 容 较 多 ,这 里 对 内 容 进 行 了 折 全 处理, 读者 在 操作 时 输入 
较 多 的 文字 即 可 。 


<body> 
<div id="box" 
S2ySEWBB/ho> 
<div id="paper". 
PORRNRTF </p> 
<span><img src="images/011.jpg" width="199" height="142" /></span> 
<p>| p> 
<p> |</p> 
</div> 
</div> 
</body> 


5-21 页 面 结构 (1) 


对 于 整体 结构 而 言 , 之 所 以 使 用 多 层 嵌 套 关系 的 div 容器 盛 放 各 种 元 素 , 是 根据 需要 
实现 的 效果 而 确定 的 。 本 例 中 ,由 于 实现 的 效果 很 简单 ,所 以 使 用 box 容器 作为 所 有 元 
素 的 外 包 庄 ,使 用 h2 元 素 作 为 文章 的 标题 ,使 用 paper 容器 作为 盛 放 文 章 正文 的 容器 ,就 
完全 能 够 实现 所 需 效果 。 

如 果 要 实现 的 效果 复杂 , 则 需要 更 多 的 元 素 加 以 控制 。 这 种 规划 页 面 的 能 力 是 由 实 
践 经 验 而 来 ,读者 需要 逐步 学 习 才 能 达到 这 种 水 平 。 

© 将 鼠标 定位 在 “代码 ”视图 ,在 本 页 面 head 区 域 创建 具体 的 CSS 规则 ,如 
图 5-22 所 示 。 

代码 中 ,最 为 重要 的 规则 是 “# paper span {float:left;margin: 5px 5px 5px 0;)”, IE 
是 由 于 图 像 所 在 的 span 元 素 进行 了 浮动 设置 ,使 得 周围 的 文字 可 以 环绕 着 图 像 排 列 。 

了 文字 与 图 像 之 间 留 有 空隙 ,还 设置 了 外 边 距 进行 美化 。 

© 保存 当前 页 面 ,通过 浏览 器 预览 可 以 看 到 效果 ,如 图 5-23 所 示 。 

© 在 实际 工作 中 ,有 些 时 候 需 要 将 图 像 置 于 正文 中 央 , 这 就 需要 对 CSS 规则 进一步 
修改 ,如 图 5-24 所 示 。 保 存 当 前 页 面 ,通过 浏览 器 预览 可 以 看 到 效果 ,如 图 5-25 所 示 。 
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<style> 
“1 
padding: 0px; 
margin: Opx; 


text-indent :2em; /* 首 行 缩 进 2 个 汉字 的 距离 */ 
line-height:1.5;/*1.5 售 行 高 */ 


} 
body 1 
font-size: 12px; 
color:#333; 
} 
box ( 
width:600px; 
margin:20px auto;/* 设 置 上 下 外 边 距 20 像素 ， 左 右 外 边 距 自 动 */ 
} 
#box h2 { 
font-size:14px; 
line-height:30px; 
padding-left: 10px; 
border-left:10px #F60 solid; 
} 
#paper 1 
border:2px #F60 solid; 
padding:15pxiV/* 设 置 内 边 距 ， 避 免 内 容 紧 贴 外 轮廓 */ 
) 
#paper span { : pp _ 
float :left;/* 设 置 图 像 浮动 ， 使 得 正文 得 以 环绕 图 像 */ 
margin:5px 5px Spx 07/* 设 置 图 像 与 正文 间 的 距离 */ 
} 
</style> 


5-22 ”CSS 规则 (3) 


MHI - Windows Internet Explorer 
GO Or WcensemN o) -AER ao. tr X [万 

XD MO HEV BAW IAD MV 

TERR FMS a- 0 了 m + D- sto UAY- @- 


| sezar 


茵 尼 歌 剧院 位 于 演 大 利 亚 落 尼 ， 是 20 世 纪 最 具 特 色 的 建筑 之 一 ， 也 是 世界 荐 名 的 表演 艺术 中 心 ， 已 成 为 
秋 尼 市 的 标志 性 建筑 。 该 歌剧 院 1973 年 正式 落成 ，2007 年 6 月 28 日 被 联合 国教 科 文 组 织 评 为 世界 文化 遗产 ， 该 
剧院 设计 者 为 丹 壶 设计 师 约 思 - 乌 松 。 秋 尼 歌剧 院 坐 落 在 秒 尼 港 的 便利 朗 角 〈Bennclong Point) ， 其 特有 的 山 
造型 ， 加 上 每 尼 港湾 大 桥 ， 与 周围 景物 相映 成 趣 。 

D ae B8EWNBSTI AS EE XE, Sama, M 
R. RERET Tüibtbbigtrskthapttis, TERURA NE 
3UTER1$6166968 APU 

` Wip6S C WEIPR37705FiN cF0300055, £Fy H At W(t+t 
桔 盛 举 ， 是 全 界 最 大 的 表演 艺术 中 心 之 一 。 歌 剧院 白色 屋顶 是 由 一 百 
多 万 片 瑞典 阿 瓦 铺 成 ， 并 经 过 特殊 处 理 ， 因 此 不 怕 海 风 的 侵 芍 ， 层 顶 
下 方 就 是 悉尼 歌剧 院 的 两 大 泰 演 场所 一 音乐 厅 (Concert Ha 和 可 剧院 
(Opera Theater)。 音 乐 厅 是 秋 尼 歌剧 院 最 大 的 厅 富 ， 共 可 容纳 2679 各 
观众 ， 通 常用 于 沧 办 交响 乐 、 室 内 乐 、 歌 剧 、 舞 由、 合唱 、 流 行乐 、 
用 士 乐 等 多 种 表演 。 此 音乐 厅 最 特别 之 处 ， 就 是 位 于 音乐 厅 正 前 方 ， 由 演 大 利 亚 艺 术 家 Ronald Sharp 所 设计 
建造 的 大 管风琴 (Grand Organ)， 号 称 是 全 世界 最 大 的 机 械 木 连 杆 风琴 (Mechanical tracker action organ)， 由 
10500 个 风 管 组 成 ， 此 外 ， 整 个 音乐 厅 建 村 使 用 均 为 澳大利亚 木村 ， 忠 实 呈 现 澳 州 自 有 的 风格 


display block; text-align center, 


图 5-23 图 文 环绕 效果 


#paper span { 
display:block; 
text-align:center; 


margin:5px 5px Spx 0;/* 设 置 图 像 与 正文 间 的 距离 */ 


5-24 ”修改 CSS 规则 
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/图 文 混 排 — Windows Internet Explorer 

GO “e rumiWmscCevWSEMPE 01) 一 -机 起 ESFRitvaotc 司 ér X ||/ 

文件 中 RED FEV ARW IAV 帮助 如 

AURR meues R - D ` = @ - mv: 220; IRO - @- 


| sezar 


悉尼 了 歌剧 院 位 于 澳大利亚 悉尼 ， 是 20 世 纪 最 具 特 色 的 建筑 之 一 ， 也 是 世界 竺 名 的 表演 艺术 中 心 ， 已 成 为 
悉尼 市 的 标志 性 建筑 。 该 吏 剧 院 1973 年 正式 落成 ，2007 年 6 月 28 日 被 联合 国教 科 文 组 织 评 为 世界 文化 遗产 ， 该 
剧院 设计 者 为 丹麦 设计 师 约 思 - 乌 松 。 悉尼 歌剧 院 坐落 在 悉尼 港 的 便利 朗 角 Bennelons Point) ， 其 特有 的 帆 
造型 ， 加 上 番 尼 港湾 大 桥 ， 与 周围 景物 相映 成 起 。 


一 - 


y 


WET 72823. TEFEN WE. MERET TARTINE 
游 ， 釉 尼 歌 剧院 随时 为 游客 展现 不 同 多 样 的 述 人 风采 。 

每 年 在 秋 尼 歌剧 院 举 行 的 表演 大 约 3000 场 ， 约 二 百 万 观众 前 往 共 联 感 举 ， 是 全 界 最 大 的 表演 艺术 
一 。 歌 剧院 白色 屋顶 是 由 一 百 多 万 片 瑞典 陶 瓦 铺 经 过 特殊 处 理 ， 因 此 不 怕 海 风 的 侵 贰 ， 屋 项 
秋 尼 歌剧 院 的 两 大 表演 场所 一 音乐 厅 (Concert Ha) 和歌 蝇 院 (Opera Theaterj。 音 乐 厅 是 悉尼 歌剧 院 最 大 的 厅 
黎 ， 共 可 容纳 2679 和 名 观众 ， 通 常用 于 举办 交响 乐 、 室 内 乐 、 歌 天、 舞蹈 、 合 唱 、 流 行乐 、 格 士 乐 等 多 种 表 
注 。 北 音乐 厅 最 特别 之 处 ， 就 是 位 于 音乐 厅 正 前 方 ， 由 澳大利亚 艺术 家 Ronald Sharp 所 设计 建造 的 大 管风琴 
(Grand Organ)， 号 称 是 全 世界 最 大 的 机 械 木 连 杆 风琴 (Mechanical tracker action organ)， 由 10.500 个 风 管 组 成， 
此 外 ， 整 个 音乐 厅 建 村 使 用 均 为 澳大利亚 木村 ， 忠 实 旺 现 澳 州 自 有 的 风格 


5-25 图 像 居 中 效果 


2. 图 文 混 排 板块 


在 板块 布局 方面 ,图 文 混 排 也 十 分 常见 ,图 5-26 所 示 的 是 搜狐 网 主页 某 板块 的 截图 。 
从 技术 层面 来 看 ,这 种 板块 布局 的 方式 核心 
内 容 同 样 是 图 像 的 浮动 ,对 于 正文 内 容 来 说 无 非 — 
使 用 列表 进行 实现 。 这 里 同样 以 案例 的 形式 进 . AR 


D IT* 数码 - 手机" 软件 下 载 " 产品 库 " 数码 公社 


行 i "电影 天 布 斯 5 月 开拍 日 企 扎堆 投资 台湾 
figei BARAR . ME KET: TERN REEE 
【演练 5-8】 图 文 混 排 板 块 。 + 庄 基 亚 全 属 机 仅 558 秒杀 相 机 拍照 机 i0s 精 品 游戏 辕 排行 
© 启动 Dreamweaver CS5 ,并 创建 站 点 。 ` BEANT 极 品 革 果 装备 秀 /图 TATARER 


. "42 寸 30 液 晶 2848 元 超时 尚 相机 Lady Gatti ERA 
在 站 点 内 创建 和 images” 文 件 夹 , 并 把 制作 好 的 图 。 “. 情 @ 的 小 9 太空 版 下 载 iPhone 游戏 汇总 玩 转 Wp 全 教程 
-BEDRI THERE 本 世纪 30 年 代 人 类 有 望 上 火星 
像 放置 其 中 。 * 铁道 部 禁止 代 售 点 网 上 卖 票 淘宝 商城 补 税 终结 野蛮 电 商 
O 创建 空白 XHTML 文档 ,在 页 面 中 创建 热点 | 高薪 职 位 ， 就 等 你 来 ! 。 蒋介石 你 所 不 知 的 一 面 


合理 的 页 面 结构 用 于 放置 图 像 和 文字 ,如 图 527 amaan mu suis EE em MER 
所 示 。 

© 将 鼠标 定位 在 “代码 视图 ,在 本 页 面 
head 区 域 创建 页 面 初始 化 规则 与 具体 的 CSS 规则 ,如 图 5-28 和 图 5-29 所 示 。 

@ 保存 当前 页 面 ,通过 浏览 器 预览 可 以 看 到 效果 ,如 图 5-30 所 示 。 


5-26 图 文 混 排 板块 
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<a> 
< id="box"> 
<div classe"pictat"> 


div cless="hotpic"><a hre: 
Sal elasssm1ist03> 


margin 
padding: 0; 


1 

body { 
font-size: 12px; 
font-family: simsun; 
background:#fff; 
color: #2b2b2b 


font-size:12px 


) 
img { 


border:0; 


text-decoration:none; 


ink ( 
color: #004276; 


) 
a:visited { 
color: #00427. 


) 

a:hover ( 
text-decoration:underline; 
color: #ba2636; 


ul( 


list-style:none; 
) 


5-28 初始 化 CSS 规则 


EHME - Window， 


- 


#” Seteu=FB At. 从 每 全 100 
Sre="images/012, ipa" width="123" helght="86" /></e> </div> 


到 a00 元 </aycjaay 


> 中 国 太 主 要 市 场 </=> 


4">3205 竹 机 入 前 2999 元 </a> </11> 

268 机 上 前 2999 元 </3> </11> 
268 科 机 鲁 六 2999 元 5/8> </11> 
.# ">3208 拉 机 入 昼 2999 元 <a> </li> 
>32GP 笠 机 和 性 2999 元 <1a> </11> 


图 5-27 页 面 结构 (2) 


#box 
width:370px; 
height: 260px; 
border:lpx #999 solid; 
margin: 20px; 
padding: 10px; 


cTxt h3 
font:bold 16px/22px 宋体 ; 
padding: Tpx 0 0; 
margin-bottom: 7px; 


) 
hotPic ( 
float:left; 
width:123px; 
height: 86px; 
margin:Spx 12px 0 0; 


3t03 li ( 
font-size:14px; 
line-height:24px; 
) 

space10 
clear:both; 
height: 10px; 
line-height 
font-size: 


02 li ( 
background: url (images/ico. jpg) 

no-repeat left center; 
padding-left :21px; 
font-size:14px; 
line-height:24px; 

) 

-list02 1i span ( 
padding-right: 7px 


5-29 CSS 规则 (4) 


Internet Explorer 


GƏ “er mdascems o xp [ag 
ZED SAO FEV RAW IAD 帮助 名 


AURR GTG 


2-0- O8- mov- 


笔记 本 电脑 关税 降 八 成 : 从 每 台 1000 元 降 到 200 元 


奢侈 手机 售 价 190 万 中 国 成 主要 市 场 
西安 2000 亿 吸引 三 星 落地 不 合 时宜 
iPhone 4 供 货 不 足 销售 商 无 策 


电信 联通 战火 烧 至 千 元 智能 机 


e [播客 ] 魅族 四 核 手机 MX 正式 发 布 32GB 手 机 售 价 2999 元 
E [播客 ] 魅族 四 核 手机 MX 正式 发 布 32GB 手 机 售 价 2999 元 
后 ' [播客 ] 魅族 四 核 手 机 MX 正式 发 布 3268 手 机 售 价 2999 元 
名 * [播客 ] 魅族 四 核 手机 MX 正式 发 布 32GB 手 机 售 价 2999 元 
E [播客 ] 魅族 四 核 手机 MX 正式 发 布 32GB 手 机 售 价 2999 元 


ET 


图 5-30 最终 效果 (2) 
93 


| 网 页 设计 与 制作 案例 教程 (HTML+CSSs+Dredamweaver) 


53 商用 案例 一 从 切片 到 页 面 的 实现 


专题 网 站 指 的 是 针对 某 一 主题 特意 制作 出 的 网 站 ,该 类 网 站 的 主题 大 多 涉及 热点 新 
闻 产品 推广 和 活动 宣传 等 方面 的 内 容 , 由 于 网 站 具有 一 定 的 时 效 性 ,并 且 还 需要 吸引 访 
问 者 驻足 浏览 ,所 以 网 站 通常 使 用 大 量 的 图 像 作为 美化 手段 ,整体 效果 十 分 精美 。 本 节 同 
样 采用 “DIV 十 CSS” 模 式 完成 专题 网 站 的 制作 ,在 实现 过 程 中 向 读者 介绍 图 像 切片 的 
方法 。 


5.3.1 页 面 规 划 与 切片 的 联系 


使 用 Photoshop 的 切片 功能 对 图 像 进行 切片 的 方法 ,取决 于 对 网 页 布局 的 规划 。 只 
有 先 对 网 页 布局 进行 合理 的 规划 ,才能 使 得 切片 顺利 进行 ,如 果 在 页 面 规划 阶段 渡 草 应 
付 , 即 便 能 够 对 图 像 进 行 切 片 ,也 为 后 期 网 页 的 实现 带 来 很 多 麻烦 。 

图 5-31 所 示 的 是 本 案例 网 页 最 终 效 果 图 ,从 整体 规划 来 看 ,页 面 大 致 分 为 头 部 .主体 
和 底部 三 大 板块 。 对 于 头 部 来 说 ,又 包含 右上 角 的 Logo 标志 和 Banner 区 域 ; 对 于 主体 
部 分 来 说 ,主要 涉及 带 高 光 的 圆 角 顶部、 带 高 光 效 果 的 中 部 和 底部 , 对 于 底部 区 域 来 说 ， 
涉及 内 发 光 效 果 的 版 权 区 域 。 


Logo 标 志 
一 Banner 区 域 
带 高 光 的 圆 角 项 部 
[关于 字 泽 忆 联 国际 
RE Rea 
带 高 光 效 果 的 中 部 
带 高 光 效 果 的 底部 
版 权 区 域 


图 5-31 网 页 效果 图 
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第 5 章 图 像 在 网 页 中 eim] 


通过 对 页 面 效果 图 的 仔细 分 析 , 可 以 发 现 切 「 wrapper 
片 工作 主要 从 公司 标志 、Banner、 圆 角 主 体 背景 
和 版 权 区 域 进行 。 此 外 ,页 面 中 还 有 部 分 区 域 会 
用 到 切片 (如 小 图 标 、 装 饰 图 像 等 ) ,这 些 细 小 部 || eement 
分 的 切片 在 整体 规划 时 无 须 考虑 太 细 , 待 制作 网 aboutus 
页 时 再 进行 实现 即 可 。 

通过 对 页 面 的 仔细 观察 ,以 及 成 熟 的 思考 ， 
这 里 将 页 面 的 布局 规划 图 展示 出 来 ,如 图 5-32 Pe 
所 示 。 footer 


logo 


header 


announcement 


5.3.2 定义 站 点 图 5-32 布局 示意 图 


1. 创建 站 点 


(Q 启动 Dreamweaver CS5 ,执行 “站 点 ”新 建站 点 ”命令 ,显示 "站 点 设置 对 象 "对 
话 框 ,如 图 5-33 所 示 。 


站 点 设置 对 象 ch04 商 用 案例 一 一 中 秋 促 销 


Dreamweaver 站 点 是 网 站 中 使 用 的 所 有 文件 和 资源 的 集合 
站 点 通常 包含 两 个 部 分 : 可 在 其 中 NL mit BU, LEESE 
夹 ， 以 及 可 在 其 中 将 相同 文件 发 布 到 web ERIRE NEEE. 


您 可 以 在 此 处 为 Dreamweaver 站 点 选择 本 地 文件 来 和 名 称 。 


站 点 名 称 : [PERA 


FEMALE: [FAHRE CEW SEAE ( 2011) —Ust WEF] Sa 


5-33 “站 点 设置 对 象 "对 话 框 


@ 在 此 对 话 框 左 侧 列表 中 选择 “站 点 "选项 ,并 在 右 侧 "站 点 名 称 ” 文 本 框 中 输入 “中 
秋 促 销 ”, 然 后 单 击 镶 图 标 按钮 ,为 本 地 站 点 文件 夹 选 择 存储 路 径 。 最 后 , 单 击 “ 保 存 ” 按 
钮 ,完成 本 地 站 点 的 创建 。 

© 在 “文件 ”面板 中 站 点 根 目录 下 分 别 创 建 用 于 放 管 图 像 的 “images" 文 件 夹 和 放 管 
CSS 文 件 的 “style” 文 件 夹 。 

@ 将 所 需 图 像素 材 拷贝 到 站 点 的 “images" 文 件 夹 内 。 


2. 创建 空白 文档 


OD 执行 菜单 栏 的 “文件 ”>“ 新 建 " 命 令 , 显 示 “ 新 建文 档 " 对 话 框 。 
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© 选择 对 话 框 左 侧 的 “空白 页 "类别, 从 “页 面 类 型 "中 选择 “HTML” 类 型 ,然后 在 “ 布 
局 ” 列 中 选择 “无 ”类 型 。 

© 在 “文档 类 型 ?下 拉 菜 单 中 选择 “XHTML 1. 0 Transitional” 选 项 ,如 图 5-34 所 示 。 
最 后 单 击 “ 创 建 ? 按 钮 , 即 可 创建 一 个 空白 文档 。 


[ER 
5-34 设置 文档 类 型 

@ 将 该 网 页 保存 在 根 目 录 下 ,并 重 命名 为 “index. html”, 如 图 5-35 所 示 。 

3. 创建 CSS 文档 


D 执行 菜单 栏 的 “文件 ”>“ 新 建 " 命 令 , 显 示 “ 新 建文 档 ”" 对 话 框 。 

@ 选择 对 话 框 左 侧 的 “空白 页 ”类别 ,从 “页 面 类 型 ? 列 中 选择 “CSS? 类 型 ,然后 单 击 
“创建 ?按钮 , 即 可 创建 一 个 CSS 空白 文档 。 

© 将 此 外 部 CSS 文档 保存 在 style ER F ,并 重 命名 为 “div. css”, 如 图 5-36 所 示 。 


EE WAARA pH EHRE v 


kolot yasjA 


日 国 站 点 - sho4 商 用 


D cio4 商 用 案例 一 
品 CG15 人 HS 加 | 加 
[mar ë ë AA 


@ ra 中 秋 保 销 AM: 201 [HZ — 


@ Em: 2012-03-18 15:54 sE 


图 5-35 新 建 空白 网 页 图 5-36 创建 CSS 文档 
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4. 将 CSS 文档 链接 至 页 面 


@ 打开 index. html 文档 ,在 Dreamweaver CS5 中 执行 “窗口 ”>“CSS 样式 ”命令 , 打 
开 “CSS 样式 "面板 , 单 击 面板 底部 的 E 图 标 按钮 ,此 时 弹出 “链接 外 部 样式 表 ” 对 话 框 。 

© 在 此 对 话 框 中 , 单 击 “ 浏 览 " 按 钮 ,将 外 部 样式 文件 “div. css” 链 接 到 “index. html” 
页 面 中 ,如 图 5-37 所 示 。 

@ 此 时 ,软件 界面 显示 两 个 文件 已 经 链接 ,如 图 5-38 所 示 。 用 户 单 击 某 个 文件 ,可 
以 在 这 两 个 文档 之 间 相 互 切换 。 


局 按 外 部 样式 表 
文件 /URL@): |style/div css v| 
89039: G üE O 
OSAD 
wiw ` 
aa sine x ll 
Irewweaver 的 范例 样式 表 可 以 帮助 多 起步， CIR div. ess 
图 5-37 链接 CSS 文档 图 5-38 成 功 链接 


5.3.3 ”页面 的 具体 实现 


1. 头 部 区 域 的 制作 


Q 待 准备 工作 结束 后 ,切换 到 “div. css” 文 档 , 为 整个 页 面 进行 初始 化 定义 ,如 图 5-39 
所 示 。 

© 将 网 站 效果 图 在 Photoshop CS5 中 打开 ,使 用 “吸管 "工具 通 在 效果 图 边缘 处 单 
击 , 吸 取 背 景 颜色 ,此 时 弹出 如 图 5-40 所 示 的 对 话 框 。 这 里 要 记录 对 话 框 中 所 显示 的 
RGB 颜色 值 " #0a78b4”。 


， w 
body, div, dl, dt, dd, ul, ol, li, h1, 
h2, h3, h4, 

margin:0; 

padding:0; 
} 
table {border-collapse:collapse; 
img (border:0;) 


text-indent: 
margin-bottoi 
margin-top:1 


: [201 | 度 Ot: [47 | 


: [94 |% Oa: [11 | 


1: [71 |% Ob: |40 
h (text-align:left;) == op 


ul {list-style:none;} 


hl, h2, h3, h4, : [10 Cl84 |% 
font-size:100%; 一 一 一 一 
font-weight:normal; : |120 M: [49 |% 


{ 


} 

.Clear {clear:both;} 
.£1 {float:left;} 
-fr {float:right;} 


:| 180 v:[15 |% 
# 0a78b4 mjo I 


图 5-39 页 面 初始 化 CSS 规则 图 5-40 “ 拾 色 器 ?对 话 框 
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© 切换 到 “div. ess" 文 档 中 ,编写 CSS 规则 定义 网 页 背景 颜色 和 字体 大 小 ,如 图 5-41 
所 示 。 


body { 
font :13px "WHEE", "S", verdana, sans-serif; 
color:#000; 

background: #0a78b4; 


图 5-41 定义 body 元素 规则 


图 切换 到 “index. html" 文 档 中 ,在 “插入 ”面板 的 “常用 ”选项 卡 中 单 击 “ 插 入 Div 标 
签 ” 按 钮 ,弹出 “插入 Div 标签 ”对 话 框 ,在 “插入 "下拉 菜单 中 选择 “在 插入 点 ”选项 ,在 “ID” 
下 拉 列 表 框 中 输入 wrapper, 最 后 单 击 “ 确 定 ” 按 钮 , 即 可 在 页 面 中 插入 wrapper 容器 。 

© 删除 wrapper 容器 内 多 余 文 字 , 在 “插入 ”面板 的 “常用 ”选项 卡 中 单 击 “ 插 入 Div 
标签 ”按钮 ,弹出 “插入 Div 标签 ”对 话 框 ,按照 图 5-42 所 示 的 参数 进行 设置 ,最 后 单 击 “ 确 
定 ” 按 钮 , 即 可 在 wrapper 内 部 插入 logo 容器 。 

© 删除 logo 容器 内 多 余 文 字 , 在 “插入 ”面板 的 “常用 ”选项 卡 中 单 击 “ 插 入 Div 标签 ” 
按钮 ,弹出 “插入 Div 标签 ”对 话 框 ,按照 图 5-43 所 示 的 参数 进行 设置 ,最 后 单 击 “ 确 定 ” 按 
钮 , 即 可 在 logo 容器 后 面 插入 header 容器 。 至 此 ,页 面 此 时 的 结构 如 图 5-44 所 示 。 


MA: [EREE v| [<div id= wrapper"> M Mea ismi M 
Gi `v 


m: so ` 


FR css 规则 


5-42 插入 logo 容器 图 5-43 插入 header 容器 


@ 在 Photoshop CS5 中 ,使 用 “切片 ”工具 池 在 效果 图 右上 角 拖 忠和 矩 形 区 域 ,将 Logo 
图 像 切 出 来 ,如 图 5-45 所 示 。 


= 中” ec w ë Bm. m- | 基本 功能 ~ | 


We [Ex gel e] 


sub.psd @ 200% (图 层 89, RGB/8)* x 


:sD7 | 


<body> 
<div id="wrapper"> 
<div id="logo"></div> 
<div id="header"></div> 
</div> 
</body> 


图 5-44 ”当前 页 面 结构 (3) 图 5-45 Logo 图 像 的 切片 


NO NN 


在 Photoshop 软件 的 菜单 栏 中 执行 “文件 ”一 "储存 为 Web 和 设备 所 用 格式 ” 命 
令 , 此 时 弹出 如 图 5-46 所 示 的 对 话 框 。 在 此 对 话 框 中 ,用 户 可 以 在 右上 角 的 下 拉 菜 单 中 
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选择 该 图 像 切片 的 格式 ,这 里 选择 “PNG 8 128 仿 色 ”选项 。 最 后 单 击 “ 保 存 ” 按 钮 ,将 该 切 
片 保存 在 站 点 的 “images” 文 件 夹 中 ,并 命名 为 “logo. png”, 


rT pyyzj 


图 5-46 “存储 为 Web 和 设备 所 用 格式 ”对 话 框 
© 隐藏 Logo 图 像 所 在 的 图 层 ,使 用 同样 的 方法 ,在 效果 图 中 顶部 切 出 宽 942 像素 ， 
高 53 像素 的 图 像 ,如 图 5-47 所 示 ,并 将 该 图 像 保存 为 "logo_bg. jpg", 


B eo mwa) meo MW sso HRD mo SOw Mew | m He -A a S| s 


5-47 ”logo_bg 图 像 切 片 


D 根据 布局 的 规划 ,在 Photoshop 中 切 出 宽 942 像素 ,高 270 像素 的 图 像 , 如 图 5-48 
所 示 ,并 将 该 图 像 保 存 为 “header_bg. jpg” o 


B eeo sso mto MEN 选择 名 Lan mm mnao Paw D- ws. | 4 Q |E jX+ |as -oa 


PET Ë: 


RS 


5-48 header_bg 图 像 切片 
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O 切换 到 “index. html” 文 档 中 ,将 刚才 制作 的 “logo. png” 图 像 插 入 到 “二 div id= 
"logo" ></div>” 2H. WHA“ div. css” 文 档 中 ,编写 对 应 的 CSS 规则 ,如 图 5-49 所 
示 。 此 时 ,保存 网 页 文档 ,通过 浏览 器 预览 即 可 看 到 效果 ,如 图 5-50 所 示 。 


#wrapper { 
width: 942px; 
margin:0 auto; 


#10go 
background: 
url(../images/logo bg.jpg) 
no-repeat left top; 
height:53px; 


#10go img 
float:right; 
margin-right:50px; 


url(../images/header_ bg.jpg) 
no-repeat left top; 
height:270px; 


图 5-49 CSS 规则 (5) 


活动 果 润 :2013 年 09 月 10 日 Z 2015 年 1o 只 1o 日 


5-50 ”预览 效果 (3) 


2. 主体 区 域 的 制作 


对 于 主体 区 域 的 实现 ,难点 是 如 何 让 主体 区 域 的 背景 图 像 随 着 内 容 的 增长 而 呈现 自 

适应 的 效果 。 由 于 主体 区 域 的 背景 具有 圆 角 高光 等 艺术 效果 ,这 里 拟 创建 三 个 容器 用 于 
盛 放 主 体 区 域 背景 的 顶部 .中 部 和 底部 ,再 通过 CSS 的 帮助 将 图 像 载 人 到 容器 中 ,整个 制 
作 思 路 的 示意 图 如 图 5-51 所 示 。 
Eoee | 
| | 主体 区 域 的 中 部 切片 ] 
本 
图 5-51 示意 图 (1) 
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从 示意 图 可 以 看 出 ,使 用 Photoshop 将 主体 区 域 三 部 分 分 别 切片 输出 ,在 创建 相互 内 
套 的 容器 内 部 将 切片 载 和 ,其 中 content 容器 需要 设置 为 高 度 自 适应 ,上 且 背景 图 像 垂 直 平 
铺 ; content_top 容器 和 content_bot 容器 ,用 于 放置 顶部 和 底部 切片 , 且 不 需要 背景 重 
复 。 通 过 以 上 方法 的 处 理 , 就 能 够 满足 背景 图 像 跟 随 内 容 多 少 自动 适应 高 度 ,这 也 是 目前 
解决 此 类 问题 的 通用 做 法 。 

O 切换 到 “index. html" 文 档 中 ,在 “插入 ”面板 的 “常用 ”选项 卡 中 单 击 “ 插 入 Div 标 
得 ”按钮 ,弹出 “插入 Div 标签 ”对 话 框 ,按照 如 图 5-52 所 示 的 参数 进行 设置 , 即 可 在 
header 容器 后 面 插入 content 容器 。 

© 在 “插入 ”面板 的 “常用 ”选项 卡 中 单 击 “ 插 入 Div 标签 ”按钮 ,弹出 “插入 Div 标签 ” 
对 话 框 ,按照 如 图 5-53 所 示 的 参数 进行 设置 , 即 可 在 content 容器 内 部 插入 content_top 
容器 。 


s: | 在 开始 标 怎 之 后 M [<div id=" content"> m 
m. ` 


ID: [centent_ton ` 


5-52 ”插入 content 容器 5-53 插入 content_top 容器 


© 同样 的 操作 方法 ,在 content_top 容器 内 部 创建 content_bot 容器 。 此 时 页 面 结构 
如 图 5-54 所 示 o 

© 切换 到 “div. css” 文 档 中 ,编写 对 应 的 CSS 规则 ,如 图 5-55 所 示 。 此 时 ,保存 网 页 
文档 ,通过 浏览 器 预览 即 可 看 到 效果 ,如 图 5-56 所 示 。 


ontent 1 
background: 


url(../images/content_bg.jpg) repeat-y; 
<body> #content_top { 
<div id="wrapper"> a background 
<div ogo">[<img sr...</div> url(../images/content top_bg.jpg) 
<div ader"></div> no-repeat center top; ` 
<div ontent"> 
<div id="content_top"> #content_bot ( 
<div id="content_bot"></div> background 
</div> url(../images/content_bot_bg.jpg) 
</div> no-repeat center bottom; 
</div> padding:40px 80px 40px 80px; 
</body> 
图 5-54 页 面 结构 (3) 图 5-55 CSS 规则 (6) 


aaa 
= 


=- mv- sto- 110- @- 


图 5-56 预览 效果 (4) 
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© 根据 对 页 面 整体 布局 的 理解 ,主体 内 容 分 为 “公司 介绍 ”“ 活 动 公告 "和 “活动 奖 
品 ” 三 部 分 内 容 , 由 于 这 三 部 分 内 容 标题 和 正文 有 许多 相似 之 处 ,这 里 拟定 义 多 个 CSS 类 
分 别 应 用 在 不 同 的 元 素 中 ,简化 了 CSS 的 代码 量 。 

在 content_bot 容器 内 部 创建 名 为 aboutus 的 容器 ,并 在 其 中 插入 图 像 和 文字 ,此 时 
页 面 结构 如 图 5-57 所 示 。 


<div id="content"> 
<div id="content top"> 
<div id="content_bot"> 
<div id="aboutus" class="fl" > 
<img sri ges/001.png" width="315" height="220" / class="clear"> 
<div id="inbox" class="f1"> 


i 
<h2 class="tit"> 关 于 字 泽 互联 国际 </h2> 
<dl> 

<dt> 企 业 信息 化 解决 方案 提供 商 </dt> 

< 


d> 
<FRIRRTA.. </p> 
SAMEER /p> 

</dd> 
</d1> 
</div> 
</div> 
</div> 
</div> 
</div> 


图 5-57 页 面 结 构 (4) 


© 切换 到 *div. css” 文 档 中 ,编写 对 应 的 CSS 规则 ,如 图 5-58 所 示 。 


#aboutus { 
border-bottom: lpx #CCC dotted; 
padding-bottom: 15px; 
) 
#aboutus img ( 
float:left; 
margin-right:20px; 
} 
-tit { 
padding-left:50px; 
background: url(../images/h2 bg.gif) no-repeat; 
height :30px; 
font-size:18px; 
line-height : 30px; 
color:#039; 
font-weight: bolder; 
margin-bottom: Spx; 
} 
#inbox { 
width: 440px; 
} 
#aboutus dt { 
color:#F60; 
font-weight: bolder; 
} 


5-58 CSS 规则 (7) 


@ 在 aboutus 容器 后 面 插入 announcement 容器 ,并 在 其 中 插入 图 像 和 文字 ,此 时 页 
面 结构 如 图 5-59 所 示 。 

切换 到 “div. css” 文 档 中 ,编写 对 应 的 CSS 规则 ,如 图 5-60 所 示 。 此 时 ,保存 网 页 
文档 ,通过 浏览 器 预览 即 可 看 到 效果 ,如 图 5-61 所 示 。 

© 由 于 页 面 第 三 部 分 是 “活动 奖品 ”, 所 以 这 里 采用 表格 将 内 容 展 现 出 来 。 在 
announcement 容器 后 面 插入 prizes 容器 ,并 在 其 中 插入 图 像 和 文字 ,此 时 页 面 结构 如 
图 5-62 所 示 。 
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<div id="content"> 
<div id="content_top"> 
<div id="content_bot"> 
"aboutus" class: 


n" > kmg sr-..J 

#announcement { 
padding:10px 10px 15px 10px; 
border-bottom: lpx #CCC dotted; 


"announcement" class="clear"> 

="tit"> 活 动 公告 </h2> 

<div id="announcement part"> 

<p><span> 活 动 主题 </span>: 庆祝 中 秋 佳节 ， 字 泽 互联 节日 献礼 ! <br /> ) 

<span> 活 动 时 间 </span>: 2013 年 09 月 10 日 “至 2013 年 10 月 10 日 <br /> kan 
<span> 活 动 概述 </span>: 活动 其 辣 ， 甩 是 .<br /> 
<span> 活 动 范围 </s5pan>: 全 国 <br /> 
<span> 活 动 专线 </span>: 1234567890<br /> 


nnouncement_part 


padding-lēft:50px; 


#announ 


</p> 
</div> ) 
</div> nouncement_part p span ( 
</div> color: #F60; 
</div> font-weight:bolder; 
</div> ) 


图 5-59 页 面 结构 (5) 图 5-60 CSS 规则 (8) 


”关于 字 泽 互联 国际 
企业 信息 化 胃 决 方 素 提供 商 

字 深 互联 及 而 向 优 和 企业 的 按 具 特色 的 "高 品质 联网 荫 务 平台 ” 主要 业 
务 包括 : 网 站 建设 , 网 站 设计 ， 网 站 开发 , 电子 商务 ,网 站 推广 ,网络 营销 


网 站 维护 , EREN ， 城 名 注册 等 相关 信息 服务 “以 最 低 的 成 本 , 为 客户 多 
壮 量 大 的 价值 是 我 们 的 核心 价值 观 , 


我 们 丰富 的 网 络 概 务 树 痊 ,完善 的 笋 务 体系 , 领先 的 技术 研发 能 力 ， AA 
We YOU N. MANDA. 是 我 们 为 用 户 提供 高 品质 服务 承诺 的 基础 . 


和 活动 公告 


庆祝 中 秋 侍 节 , PRIRSRML! 


TES 


fol 
舌 动 要 还 
AEM 


2013 年 09 月 10 日 至 2013 年 10 月 10B 
活动 鹃 间 ， 凡 是 与 泽 互联 签订 台风 的 所 有 襄 户 ， RRR, 
全 国 


841538 : 1234567890 


561 预览 效果 (5) 


<div id="content"> 
<div id="content_top"> 
<div id="content_bot"> 
<div id="aboutus" class="fl" 


>Kimg sr...) 


ouncement" clas: 
Rh2 cia...) 
</div> 
<div id="prizes"> 
<h2 class="tit"> 活 动 奖品 </h2> 
<div id="prizes_part"> 
"100%" 


clear"> 


able w er="0" lspacir 


ith 


padding="0"; 


29% 
71% 


="col"> 合 同 金额 范围 < 
”col"> 风 送礼 品 </th: 


1000 元 -2999 元 </td: 
台电 潮 系列 64BG/USB3.0 U 熏 </td 


3000 元 -4999 元 
i> 希捷 容 曙 系列 2.5 英 十 1TB 移 动 硬盘 


5000 元 
td> 三 星 GALAXY Tab P7500 (16GB) 


平板 电脑 </td 


<p> 隆 :所 有 和 礼品 殉 ..-]</p> 
</div> 
</div> 
</div> 
</div> 
</div> 


图 5-62 页 面 结构 (6) 
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D 切换 到 “div. css” 文 档 中 ,编写 对 应 的 CSS 规 erises i 


padding:10px 10px 15px 10px; 
= border-bottom:lpx #CCC dotted; 
则 ,如 图 5-63 所 示 。 } 
#prizes part 


{ 
padding-left:50px; 
#prizes_part th { 


3. 版 权 区 域 的 制作 
background: #f8f8f8; 
D 将 光标 定位 在 “设计 ”视图 中 ,在 “插入 ”面板 的 Pe Aligo conte 


“常用 ”选项 卡 中 单 击 “ 插 入 Div 标签 ”按钮 ,弹出 “插入 aeir slcc solid; 
Div 标签 ”对 话 框 ,在 “插入 ”下 拉 菜 单 中 选择 “在 开始 标 SE 
签 之 后 ”选项 ,并 在 后 面 下 拉 菜 单 中 选择 “content” 选 
项 ,然后 在 "ID” 下 拉 列 表 框 中 输入 footer, 最 后 单 击 “ 确 
定 ” 按 钮 , 即 可 在 content 容器 后 面 插入 footer 容器 。 

© 切换 到 div. css 文件 中 ,创建 对 应 的 CSS 规则 ,如 图 5-64 所 示 。 保 存 网 页 文档 , 通 
过 浏览 器 预览 即 可 看 到 最 终 效果 。 


tfooter ( 
background:ur1(../images/footer_bg.jpg) no-repeat center top; 
height: 60px; 
color:#FFF; 
text-align:center; 
padding-top: 30px; 


5-63 CSS 规则 (9) 


图 5-64 CSS 规则 (10) 


至 此 ,页 面 所 有 的 制作 过 程 已 经 全 部 完成 ,读者 可 以 修改 CSS 规则 或 装饰 图 像 进 一 
步 美化 网 页 。 


54 实 训 


1. 实 训 要 求 


参考 本 例 提供 的 PSD 源 文件 ,仔细 分 析 页 面 布 局 ,规划 出 切片 合理 ,实现 容易 的 布 
局 ,并 使 用 “DIV 十 CSS” 的 模式 制作 网 页 。 制 作 过 程 中 ,着 重 学 习 切 片 输出 的 方法 ,体会 
网 页 制作 的 全 过 程 。 


2. 过 程 指 导 


D 打开 PSD 源 文件 ,观察 网 页 效果 图 整体 布局 ,如 图 5-65 所 示 。 从 图 5-65 中 可 以 
看 出 ,整个 页 面 背景 具有 木 纹 效果 ,而 主体 区 域 全 部 放置 在 具有 信纸 效果 的 背景 中 ,此 外 
信纸 左 侧 还 具有 规律 的 穿孔 效果 。 通 过 这 些 分 析 可 知 , 木 纹 背景 单独 切片 放置 在 body 
元 素 中 ,主体 区 域 信纸 效果 切片 为 顶部 、 中 部 和 底部 三 部 分 图 像 ,采用 本 章 “ 商 用 案例 ”中 
的 方法 进行 处 理 。 

© 启动 Dreamweaver CS5, 并 创建 站 点 。 在 站 点 内 创建 images” 文 件 夹 和 “style” 文 
件 夹 。 分 别 创建 空白 网 页 文档 和 外 部 CSS 文档 ,然后 将 两 者 链接 起 来 。 
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地 深 忆 联 国际 成立 于 2001 年 5 月 ,注册 资 全 100 万 。 公 司 是 信息 产业 SB 十 的 部 新 技术 软件 企业 。 集 团 公 


5-65 最终 效果 (3) 


@ 根据 需要 设计 规划 页 面 整 个 布局 ,示意 
图 如 图 5-66 所 示 。 将 光标 定位 在 设计 视图 中 ， 
在 空白 网 页 内 部 创建 wrapper 容器 ,切换 到 
CSS 文 件 ,输入 相应 的 规则 。 

© 参照 布局 示意 图 ,在 wrapper 容器 内 部 
依次 创建 content 容器 、content_top 容器 和 
content_bot 容器 ,用 于 创建 跟随 内 容 多 少 自 
动 适应 其 高 度 的 信纸 背景 。 

O 根据 示意 图 中 各 容器 之 间 的 关系 ,参照 
上 述 步骤 ,将 页 面 中 其 他 div 容器 制作 出 来 。 

@ 切换 到 CSS 文档 中 ,依次 创建 对 应 的 
CSS 规则 。 

© 保存 所 有 文件 ,在 浏览 器 中 预览 并 修 
改 , 最 终 效果 可 参照 图 5-65。 


wrapper 
content 
content_top 
content_bot 
header 
logo [ menu 
aboutus 
pic 
liucheng 


footer 


5-66 示意 图 (2) 
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55 7J 题 


. 网 页 中 的 图 像 常 见 的 有 哪 几 种 格式 ? 它们 之 间 有 何 区 别 ? 

. 什么 是 图 像 热点 区 域 ? 

. CSS 控制 图 像 背 景 的 属性 有 哪些 ? 

. 当 某 一 元 素 既 有 背景 色 属 性 又 有 背景 图 属性 时 ,该 如 何 显示 ? 
. a 元 素 的 伪 类 “a:hover” 常 用 于 何 种 环境 ?能 够 实现 何 种 效果 ? 
. 图 文 混 排 的 实质 是 什么 ? 

. 利用 图 文 混 排 的 知识 制作 如 图 5-67 所 示 的 效果 。 

. 利用 图 文 混 排 版 式 的 知识 制作 如 图 5-68 所 示 的 效果 。 


oo ~ 中 上 oo = 


GO- rwimacsewials lx| | 月 
XPO RAO SFV wQ IAV WHW 
XRRR GIE ü- 0 


网 页 设计 与 制作 
本 书 是 一 本 基于 Web 标 准 的 运用 
站 的 教材 。 本 书 由 吴 丰 > 体育- 时 尚 
以 实例 为 主 ， 从 理论 
， 使 读者 重新 认识 网 页 制 


欧冠 切 尔 西 胜 巴 萨 部 路 备战 不 轻 歼 


体育 LATE ERTH 
趣 图 : 韦 德 吃 毒药 头痛 10 大 了 VA 商品 


网 页 设计 与 制作 (第 5 版 ) 社区 :李永波 轻 慢 李 宗 伟 激 稳 保 林丹 
全 4 亚 冠 - 泼 判 手球 泰达 0-0 平 五 佳 球 

网 页 设计 与 制作 (Dreamweaver CS5 版 ) 

: Dm 全 :西甲 德比 宣传 片 世纪 大 战 五 佳 球 
精通 Css 全 超级 中 球 -揭秘 阿 内 尔 卡 争 权 内 夏 
HTML XHTML CSS 基础 教程 (第 6 版 ) 时 尚 | 朱茵 情场 得 

ki): H 

= 
网 页 设计 与 制作 拼接 连 衣 扬 超 实用 懒 女孩 至 美 守 措 
css 和 门 “Ra” WE 请 男人 们 提高 警 


邓 文 过 拼 色 吊 脖 密 职场 宽松 闭 腿 实 
香 美 生子 变 另类 移民 旺 夫 女 人 面相 
3323236212 成 年 人 有 梭 自主 审美 


超越 CSS，。WEB 设 计 艺 术 精 艇 


时 我 的 电脑 
图 5-67 习题 7 对 应 图 图 5-68 习题 8 对 应 图 
9. 使 用 Photoshop CS5 打开 页 面 效果 图 ,如 图 5-69 所 示 。 仔 细 观 察 页 面 整体 布局 ， 
在 规划 出 布局 的 基础 上 使 用 Photoshop 的 切片 功能 将 所 需 图 像 输出 ,采用 “DIV 十 CSS” 


的 模式 将 效果 图 转化 为 网 页 。 
10. 使 用 CSS 规则 对 页 面 中 的 图 像 和 文本 加 以 控制 ,制作 如 图 5-70 所 示 的 页 面 。 
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安享 3 1 9 日 信 服务 


免费 享受 3 次 上 保修 期 最 后 | 年 免 免费 赠送 了 次 
门 清洗 内 机 服务 费 进 行 深度 保养 过 滤 网 和 调节 阀 


深度 保养 包括 - 
-KRBAR 


图 5-69 习题 9 对 应 图 


TTE aan p e 
rt mao FEV aw IAV Faw 
w ge a- - mav- 220- IRW- @- 


+$; Crossing 


*** 


5-70 习题 10 对 应 图 
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第 6 章 ”网 页 元 素 一 列表 


口 掌握 列表 的 种 类 及 其 结构 。 

口 掌握 CSS 控制 列表 的 相关 属性 和 使 用 方法 。 
口 掌握 伪 类 与 伪 元 素 的 相关 知识 。 

口 能 够 使 用 列表 元 素 实 现 各 种 页 面 导 航 。 


在 "DIV 十 CSS "模式 的 网 页 制作 中 ,列表 元 素 被 放置 在 非常 重要 的 地 位 ,常见 的 菜单 
导航 、 新 闻 列表 、 图 文 混 排 布局 等 内 容 , 都 是 采用 列表 元 素 作为 基础 结构 而 创建 的 。 本 章 
主要 从 列表 的 基本 概念 入 手 , 向 读者 介绍 列表 的 常见 使 用 方法 ,以 及 CSS 在 控制 列表 元 
素 时 的 相关 属性 。 和 希望 读者 在 学 习 本 章 的 知识 后 ,能 够 灵活 运用 列表 元 素 实现 各 种 网 页 


61 列 表 


列表 形式 在 网 站 设计 中 占有 很 大 比重 ,在 信息 的 显示 方面 非常 整齐 直观 便于 用 户 理 
解 与 点 击 , 从 出 现 网 页 开始 到 现在 ,列表 元 素 一 直 是 页 面 中 非常 重要 的 应 用 形式 。 


6.1.1 列表 元 素 概 述 


在 早期 表格 式 布局 网 页 设计 中 ,如 果 要 显现 图 6-1 所 示 的 布局 ,每 一 行 必须 在 左 侧 分 
拆 出 一 yat melo s 5 A 
中 使 得 代码 非常 复杂 烦琐 ,页 面 结 构 如 图 6-2 所 示 , 设 计 性 和 可 读 性 都 较 差 。 


己 汉 网 页 设计 与 制作 》 教材 2013 年 度 销量 草 一 
e < 网 站 设计 与 制作 >》 教材 2013 征 度 销量 党 一 

全 < 网 商 设计 与 制作 教材 2013 征 度 销量 沼 二 1 
e ZR ISIL SSES 教材 2013 年 度 销量 和 一 
全 《网 中 设计 与 制作 教材 2013 年 度 稍 量 第 二 


33-05-08 


图 6-1 列表 布局 


自从 CSS 布局 普遍 推广 以 后 ,这 种 布局 设计 提倡 使 用 XHTML 中 自 带 过 ul 之 标签 和 
到 li 标签 去 实现 , 正 是 由 于 列表 元 素 在 CSS 中 拥有 了 较 多 的 样式 属性 ,所 以 绝 大 多 数 的 
设计 师 已 经 抛弃 table 表格 来 制作 丰富 的 列表 样式 设计 。 图 6-1 所 示 的 布局 如 果 使 用 无 
序列 表 元 素 ,页 面 结构 则 更 加 简洁 、 清 晰 ,如 图 6-3 所 示 。 


<body> 
<tabl der="0" cellspacing="0" cellpadding="0"> 
{iag ee img /dno Ip dthe 10 height==13* /></ta> 
6" > MODERARE 
">13-05-05</td> 
><img src= zimages/ico; jpg" wi 8" height="13" /></td> 
pb C“ SiH201325A S /ta> 
13-05-05< 
g src= images/ico; jpg" 8" height="13" /></td> 
pid 1 d> 
13-05-05: 
<img src=' vimages/ico; jpg" "18" heighte"13" /></td 
AMIE TANE 1 d> 
ia-05-05c/td> 
<img src= “images/ico, jpg" gr beight="13" /></td> 


《网 页 设计 与 制作 》 ETT 
Si 05-05</td> 


</tabl 
</body> 
6-2 表格 布局 时 的 页 面 结构 
<ul> 
<1i>《 网 页 设计 与 制作 》 教 材 2013 年 度 销量 第 一 <span>13-05-05</span></1i> 
<1i>《 网 页 设计 与 制作 》 教 村 2013 年 度 销量 第 一 <sPan>13-05-05</span></1i> 
<1i>《 网 页 设计 与 制作 》 教 材 2013 年 度 销量 第 一 <span>13-05-05</span></1i> 
<1i>《 网 页 设计 与 制作 》 教 材 2013 年 度 销量 第 一 <span>13-05-05</span></1i> 


<1i>《 网 页 设计 与 制作 》 教 材 2013 年 度 销 重 第 一 <span>13-05-05</span></1i> 
</ul> 


图 6-3 CSS 布局 时 使 用 列表 元 素 实现 列表 布局 


6.1.2 列表 的 类 型 


列表 元 素 在 网 页 中 以 无 序列 表 、 有 序列 表 和 自 定义 列表 三 种 类 型 进行 表现 ,无 论 何 种 
类 型 的 列表 ,其 骨架 结构 都 十 分 相似 。 


1. 无 序列 表 一 一 ul 


无 序列 表 , 指 的 是 列表 中 的 各 个 元 素 在 逻辑 上 没有 先后 顺序 的 列表 形式 ,大 部 分 页 面 
中 的 信息 均 可 以 使 用 无 序列 表 来 描述 。 无 序列 表 中 的 列表 项 用 i 标签 进行 表示 ,后 期 通 
过 改变 ul 和 上 i 的 外 观 即 可 设计 出 变化 多 端的 导航 。 

【演练 6-1】 创建 无 序列 表 。 

O 启动 Dreamweaver CS5 ,并 创建 空白 的 XHTML 网 页 文档 。 

© 在 软件 “代码 "视图 中 ,插入 一 组 无 序列 表 , 具 体 页 面 结构 如 图 6-4 所 示 。 

@ 保存 当前 文档 ,通过 浏览 器 预览 后 的 效果 如 图 6-5 所 示 。 

由 预览 效果 可 知 ,浏览 器 会 为 无 序列 表 中 的 每 个 列表 项 添加 一 个 项 目 符号 ,并 让 其 独 
占 一 行 ,而 且 每 行 会 针对 文档 的 左边 界 缩 进 一 定 距离 。 不 同 的 浏览 器 对 无 序列 表 的 解析 
效果 有 差别 ,但 总 体 效 果 都 十 分 相近 。 
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SO [e F HS SV v 
XD SAO FEV (W> 


创建 无 序列 表 : 


<body> 
<h2> 创 建 无 序列 表 : </h2> 
<ul> 
<li><a href="#"> 首 页 </a></1i> 
ef="#"> 国 内 </a></1i> 


"> 国际 </a></1i> 
<li><a href="#"> 财 经 c/a></1i> 
<li><a href="#"> 社 会 </a></1i> 
<li><a href="#"> 评 论 </a></1i> 
</ul> 

</body> 


图 6-4 页 面 结构 (1) 图 6-5 无 序列 表 预 览 效果 


2. 有 序列 表 一 一 ol 


有 序列 表 表 示 列 表 中 的 各 个 元 素 有 序列 之 分 ,从 上 至 下 可 以 由 编号 1、2、3、4 或 a、b、 
cd 等 形式 进行 排列 。 

【演练 6-2】 创建 有 序列 表 。 

© 启动 Dreamweaver CS5, 并 创建 空白 XHTML 网 页 文档 。 

© 在 软件 “代码 "视图 中 ,插入 一 组 有 序列 表 , 具 体 页 面 结构 如 图 6-6 所 示 。 

@ 保存 当前 文档 ,通过 浏览 器 预览 后 的 效果 如 图 6-7 所 示 。 


C 创建 有 序列 表 - vi... DOR 
GO [e rwimscsvuns 
ZO RAO FEV KE” 
ERR RPR 


新 歌 排行 TOP3: 
<body> ujanta 
<h2> 新 歌 排行 TOP3: </h2> 2. 我 以 为 一 王政 丹 


<ol> 3. 没 时间 一 牛奶 咖啡 
<1i> 你 不 知道 的 事 s#8212 ;王力宏 </1i> 

<1i> 我 以 为 #8212 ;王政 丹 </1i> 

<1i> 没 时 间 &#8212 ;牛奶 向 罪 </1i> 


</o1> 
</body> 
图 6-6 页 面 结构 (2) 图 6-7 有 序列 表 预 览 效 果 


对 于 有 序列 表 元 素来 说 ,浏览 器 会 从 1” 开始 自动 对 有 序 条 目 进 行 编号 ,如 果 需 要 使 
用 其 他 类 型 的 编号 或 从 指定 的 编号 上 累计 编号 ,二 ol 二 标签 还 包括 type 和 start 两 个 属 
性 。type 属性 值 A 代表 用 大 写字 母 进行 编号 .a 代表 使 用 小 写字 和 母 编号 ,I 代表 使 用 大 写 
罗马 数字 编号 ,i 表示 用 小 写 罗马 数字 编号 ; start 属性 值 用 于 指定 有 序列 表 的 开始 点 。 


3. 自 定义 列表 一 一 dl 


定义 列表 的 条 目 可 以 带 有 文本 、 图 片 和 其 他 多 媒体 元 素 , 它 由 过 dl 之 和 去 /dl 之 标签 
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所 包围 。 在 标签 中 ,定义 列表 的 每 个 条 目 都 由 两 部 分 组 成 : 术语 及 其 随后 的 解释 或 定义 。 
【演练 6-3】 自 定义 列表 。 
Q) 启动 Dreamweaver CS5 ,并 创建 空白 XHTML 网 页 文档 。 
© 在 软件 “代码 ”视图 中 ,插入 一 组 自 定义 列表 ,具体 页 面 结构 如 图 6-8 所 示 。 
© 保存 当前 文档 ,通过 浏览 器 预览 后 的 效果 如 图 6-9 所 示 。 
/5 自 定义 列表 - Windows In. 
E FS 总 而 加 | 全 | x 


LPO RAO FEV BRAW I” 
TERR EBER 


创建 自 定义 列表 


CPU 
中 央 处 理 器 (英文 Central 
Processing Unit, CPU) 是 一 台 计 

算 机 的 运算 核心 和 控制 核心 。 


主板 ， 又 叫 主机 板 (mainboard) 或 母 
<dt>cpu</dt> Parr s Bussa 
<d [PREE C(3Z.. .)</ dd> B EWR 的 也 是 最 重要 


<dt> 主 板 </dt> 

<dd> 庄 板 ， 又 叫 主 机 . .</dd> 
</d1> -一 一 一 一 一 一 一 一 一 
</body> PECS far Rios ~ 


<body> 
<h2> 创 建 自 定义 列表 </h2> 
<dl> 


图 6-8 页面 结构 (3) 图 6-9 自 定义 列表 预览 效果 


从 自 定义 列表 的 结构 可 以 看 出 , 自 定义 列表 中 的 列表 项 不 再 是 二 li 二 标签 ,而 是 用 
二 dt 二 标签 进行 标记 ,后 面 跟 着 由 二 dd 二 标签 标记 的 条 目 定 义 或 解释 。 

在 二 dl 二 ,二 dt 二 和 二 dd 三 个 标签 组 合 中 ,二 dt 二 是 标题 ,二 dd 二 是 内 容 , 二 dl 二 可 
以 看 做 是 承载 它们 的 容器 , 当 出 现 很 多 组 的 时 候 尽 量 使 用 一 个 二 dt 二 标签 配合 一 个 二 dd 二 
标签 的 方法 。 如 果 二 dd 二 标签 中 内 容 很 多 ,可 以 榜 套 二 p 二 标签 使 用 。 


6.1.3 CSS 控制 列表 的 相关 属性 


在 CSS 样式 中 ,主要 是 通过 list-style-image 属性 、list-style-position 属性 和 list- 
style-type 这 3 个 属性 改变 列表 修饰 符 的 类 型 ,有 关 列 表 的 属性 及 其 含义 详 见 表 6-1。 
表 6-1 CSS 列表 属性 


属 性 说 m 
list-style 复合 属性 ,用 于 把 所 有 列表 属性 设置 于 一 个 声明 中 
list-style-image 将 图 像 设置 为 列表 项 标志 
list-style-position 设置 列表 项 标记 如 何 根据 文本 排列 
list-style-type 设置 列表 项 标志 的 类 型 
marker-offset 设置 标记 容器 和 主 容 器 之 间 水 平 补 白 


1. 列表 项 标志 的 类 型 


在 表 6-1 中 ,list-style-type 属性 主要 用 于 修改 列表 项 的 标志 类 型 ,例如 ,在 一 个 无 序 
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列表 中 ,列表 项 的 标志 是 出 现在 各 列表 项 旁边 的 圆 点 ,而 在 有 序列 表 中 ,标志 可 能 是 字母 、 
数字 或 另外 某 种 符号 。 常 用 的 list-style 属性 值 见 表 6-2。 


表 6-2 常用 的 list-style 属性 值 


属性 值 说 HH 属性 值 说 — HH 
none 无 标记 ,不 使 用 项 目 符号 lower-roman | 小 写 罗 马 数字 ,如 iiini ivv 等 
disc 默认 值 ,标记 是 实心 圆 upper-roman | KEP BRF WLM N, V 
circle 标记 是 空心 圆 lower-alpha | 小 写 英文 字母 ,如 a,b,c,d e 等 
square 标记 是 实心 方块 upper-alpha | 大 写 英文 字母 ,如 A.B.C.D.E 等 
decimal 标记 是 数字 

【演练 6-4】 list-style-type 属性 的 使 用 。 

O 启动 Dreamweaver CS5 ,创建 空白 XHTML 文档 ,在 页 面 中 输入 多 组 无 序列 表 ， 

如 图 6-10 所 示 。 


@ 将 鼠标 定位 在 “代码 ?视图 ,在 本 页 面 head 区 域 创建 相关 CSS 规则 ,如 图 6-11 


所 示 。 


<body> 
<ul id="none"> 
<1i>" 无 模式 "列表 类 型 示例 </1i> 
<1i>" 无 模式 "列表 类 型 示例 </1i> 
</ul> 
<ul id="disc"> 
<1i>" 实 心 图 形 " 列 表 类 型 示例 </1i> 
<1i>" 实 心 贺 形 "列表 类 型 示例 </1i> 
</ul> 
<ul id="circle"> 
<1i>" 空 心 圆 形 " 列 表 类 型 示例 </1i> 
<1i>" 空 心 贺 形 "列表 类 型 示例 </1i> 
</ul> 
<ul id="square"> 
<1i>" 实 心 方块 "列表 类 型 示 例 </1i> 
<1i>" 实 心 方块 "列表 类 型 示例 </1i> 
</ul> 
<ul id="decimal"> 
<1i>" 数 字模 式 "列表 类 型 示例 </1i> 
<1i>" 数 字模 式 "列表 类 型 示例 </1i> 
</ul> 
<ul id="lower-roman"> 
<1i>" 小 写 罗马 文字 "列表 类 型 示例 </1i> 
<1i>" 小 写 罗马 文字 "列表 类 型 示例 </1i> 
</ul> 
<ul id="upper-roman"> 
<1i>" 大 与 罗马 文字 "列表 类 型 示例 </1i> 
<1i>" 大 写 罗马 文字 "列表 类 型 示例 </1i> 
</ul> 
<ul id="lower-alpha"> 
<1i>" 小 写 英文 字母 "列表 类 型 示例 </1i> 
<1i>" 小 写 英文 字母 "列表 类 型 示例 </1i> 
</ul> 
<ul id="upper-alpha"> 
<1i>" 大 写 英 文字 母 "列表 类 型 示例 </1i> 
<1i>" 大 写 英 文字 母 "列表 类 型 示例 </1i> 
</ul> 
</body> 


6-10 结构 代码 (1) 


<style type="text/css"> 


font-family: "WREE"; 
color:#F00; 


border:lpx #F60 solid; 
width:220px; 
float:left; 
margin-right:10px; 


ul#ci 


rcle ( 


list-style-type:circle; 


}/* 图 图 模式 */ 


ulşdisc ( 
list-style-type:disc; 
1V* 正 方形 模式 */ 


: square 


:decimal; 


list-style-type: lower-roman; 


马 文字 模式 */ 


st-style-type:upper-roman; 


罗马 文字 模式 */ 


ul#none ( 
list-style-type:none; 


1/* 无 模式 */ 


Heh 
ul#upper-alpha ( 
list-style-type:upper-alpha; 


/* 大 


tyle-type: lower-alpha; 
写字 母 模式 */ 


写字 母 模式 */ 


</style> 
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@ 保存 当前 网 页 文件 ,通过 浏览 器 即 可 看 到 预览 效果 ,如 图 6-12 所 示 。 
本 例 中 所 涉及 的 样式 类 型 有 限 ,这 是 因为 目前 有 些 浏览 器 并 不 支持 诸如 decimal- 
leading-zero(0 开头 的 数字 标记 ) 、lower-greek (小写 希腊 字母 )、lower-latin( 小 写 拉 丁字 


母 ) 和 upper-latin( 大 写 拉 丁字 母 ) 等 属性 值 。 


M2 


1 列表 修饰 符 关 型 - Windows Internet Explorer 


OO e ruwimsceunsa s| + x [P 
ZED RED SEV BRAW IAV 帮助 0 


ERR |23- < 


CELJE) 


A-A Orm 220r 


"无 模式 "列表 类 型 示例 
无 模式 "列表 类 型 示例 


* 空心 圆 形 -列表 类 型 示例 
* 空心 圆 形 ' 列 表 类 型 示例 


* "实心 圆 形 "列表 类 型 示例 
"实心 圆 形 "列表 类 型 示例 


"实心 方块 "列表 类 型 示例 
"实心 方块 "列表 类 型 示例 


1. 数字 模式 "列表 类 型 示例 
2. 数字 模式 "列表 类 型 示例 


L "大 写 罗马 文字 "列表 类 型 示例 
L 大 写 罗马 文字 "列表 类 型 示例 


i "小 写 罗马 文字 "列表 类 型 示例 
站 "小 写 罗马 文字 "列表 类 型 示例 


"小 写 英文 字母 "列表 类 型 示例 
“小写 英文 字母 "列表 类 型 示例 


A "大 写 英文 字母 "列表 类 型 示例 


B. 大 写 英文 字母 列表 类 型 示例 


6-12 ”预览 效果 (1) 


另外 ,在 不 同 浏览 器 中 部 分 类 型 的 修饰 符 列表 所 呈现 的 效果 也 不 相同 ,所 以 建议 读者 
在 使 用 此 类 修饰 符 时 尽量 使 用 大 众 化 的 类 型 ,避免 出 现 效 果 不 同 的 现象 。 


2. 列表 项 位 置 


list-style-position 属性 用 于 设置 在 何 处 放置 列表 项 标记 ,其 属性 值 只 有 两 个 关键 词 
outside( 外 部 ) 和 inside( 内 部 )。 使 用 outside 属性 值 后 ,列表 项 标记 被 放置 在 文本 以 外 ， 
环绕 文本 且 不 根据 标记 对 齐 ; 使 用 inside 属性 值 后 ,列表 项 标记 放置 在 文本 以 内 , 像 是 插 


入 在 列表 项 内 容 最 前 面 的 行内 元 素 一 样 。 


【演练 6-5】 列表 项 位 置 。 
© 启动 Dreamweaver CS5 ,创建 空白 XHTML 文档 ,在 页 面 中 输入 多 组 无 序列 表 ， 


如 图 6-13 所 示 。 


© 将 鼠标 定位 在 “代码 "视图 ,在 本 页 面 head 区 域 创 建 相关 CSS 规则 ,如 图 6-14 所 示 。 
@ 保存 当前 网 页 文件 ,通过 浏览 器 即 可 看 到 预览 效果 ,如 图 6-15 所 示 。 


<body> 


<style type="text/css"> 
ul 1 


<h3> 该 列表 的 list-style-position 的 值 是 "inside": </h3> width:300px; 


<ul class="inside"> 
<1i> 这 里 是 列表 的 具体 内 容 </1i> 
<1i> 这 里 是 列表 的 具体 内 容 </1i> 
<1i> 这 里 是 列表 的 具体 内 容 </1i> 


</ul> 


} 
ul.inside { 

list-style-position: inside; 
} /* 将 列表 修饰 符 定义 在 列表 之 内 */ 


ul.outside ( 


<h3> 访 列表 的 list-style-position 的 值 是 "outside": </h3> list-style-position: outside; 


<ul class="outside"> 
<1i> 这 里 是 列表 的 具体 内 容 </1i> 
<1i> 这 里 是 列表 的 具体 内 容 </1i> 
<1i> 这 里 是 列表 的 具体 内 容 </1i> 

</ul> 

</body> 


图 6-13 结构 代码 (2) 


} ”/* 将 列表 修饰 符 定义 在 列表 之 外 */ 


border: lpx #F00 solid; 
margin-bottom: 5px; 


</style> 


6-14 CSS 规则 (2) 
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OC 列表 项 位 置 - Windows Internet Ezplorer 


e r BH8SCSuñ v| o x [P 


EV PRAW IAD 


-= ENR.. xi 


该 列表 的 list-style-position 的 值 是 "inside" : 


这 里 是 列表 的 具体 内 容 
[这 理 是 列表 的 具体 内 容 
| 这 里 是 列表 的 具体 内 容 


表 的 list-style-position 的 值 是 "outside": 


， 区 里 是 列表 的 具体 内 容 
.区 于 是 列表 的 具体 内 容 
，。 取 至 是 列表 的 具体 内 容 


图 6-15 ”预览 效果 (2) 


3. 列表 项 图 像 


在 CSS 中 “list-style-image” 属 性 的 作用 是 ,使 用 图 像 来 替换 列表 项 标记 ,从 而 起 到 美 
化 效果 。 但 当 list-style-image 属性 的 属性 值 为 none 或 者 设置 的 图 片 路 径 出 错时 , list- 
style-type 属性 会 替代 list-style-image 属性 对 列表 产生 作用 。 

虽然 list-style-image 属性 能 够 实现 列表 图 像 的 效果 ,但 是 在 实际 应 用 中 由 于 list- 
style-image 对 位 置 的 控制 并 不 如 background 灵活 ,因此 使 用 background 属性 处 理 列 表 
图 片 的 方式 多 于 使 用 list-style-image 的 方式 。 

【演练 6-6】 列表 项 图 像 。 

© 启动 Dreamweaver CS5 ,创建 空白 XHTML 文档 ,在 页 面 中 输入 多 组 无 序列 表 ， 
如 图 6-16 所 示 。 


<body> 

<div id="box_1"> 

<h3>1ist-style-image 属 性 实现 列表 项 图 像 </h3> 
1> 


ef="#"> 这 里 能 够 正常 显示 列表 图 片 < 
这 里 由 于 占用 于 将 误 的 图 片 T8 不 能 正确 显示 < Ja></1i> 
REHHRMH BERE Annone, 所 以 没有 图 片 显示 </a></1i> 


= "box 
<h3>backgr: 0 网 性 去 现 列表 项 图 像 </hay 

<ul> 

background 属 性 实现 列表 项 图 像 </a></1i> 
backgrounad 属 性 实现 列表 项 图 像 </a></1i> 
#">background 属 性 实现 列表 项 图 像 </a></13> 


</body> 


图 6-16 ”结构 代码 (3) 


© 将 鼠标 定位 在 “代码 ”视图 ,在 本 页 面 head 区 域 创建 相关 CSS 规则 ,如 图 6-17 所 示 。 

@ 保存 当前 网 页 文件 ,通过 浏览 器 即 可 看 到 预览 效果 ,如 图 6-18 所 示 。 

通过 本 例 的 演练 ,读者 应 该 体会 到 使 用 list-style-image 属性 不 能 够 精确 控制 图 像 的 
位 置 给 实际 工作 带 来 很 多 麻烦 ,而 使 用 background 属性 既 方 便 , 又 容易 控制 各 种 元 素 , 希 
望 读者 能 够 熟练 掌握 。 
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<style type="text/css"> 

body { 
font:l4px/1.5; 

} 

#box_1 { 
width: 450px; 
height:150px; 
border:lpx #F30 solid; 
margin:l0px; 


[6 列表 项 图 像 - Windows Internet Explorer 


padding: Spx; 


GO P rRHRSLSA M + x |P 


ar A zN MO FIV IERO TAO ME 


width: 450px; 
height:150px; 


border:1px #F30 solid; 


margin: 10px; 
padding: Spx; 

} 

al 
list-style-image:url(images/001.gif); 

) /* 载 入 列表 项 图 像 */ 

‘b { 


list-style-image:url(images/error.gif); 
}V* 设 置 错误 图 像 地 址 ， 模 拟 图 像 无 法 显示 的 情况 +/ 
.c ( 


list-style-image:noni 
}/* 设 置 图 像 为 none， 模 所 ERRIRE / 
#box 2 ul { 
Iist-style:none; 
) 
#box 2 ul li { 
background:url(images/001.gif) no-repeat 
left center7/* 设 置 图 像 水 平 居 左 ， 垂 直 居中 对 齐 */ 
}/* 设 置 */ 
#box 2 ul lia ( 
padding-left: 24px; 


ëm SENE Eaik24(8 IEE, 该 距离 应 大 于 或 


等 于 列表 项 图 像 的 宽度 */ 
</style> 


图 6-17 CSS 规 则 (3) 图 6-18 预览 效果 (3) 


62 CSS 知识 积累 


之 前 的 章节 已 经 对 CSS 的 基本 知识 进行 详细 的 讲解 ,本 节 主 要 向 读者 介绍 伪 类 和 伪 


元 素 , 以 及 CSS 相关 特性 方面 的 知识 。 
6.2.1 伪 类 与 伪 元 素 


1. 伪 类 


伪 类 (Pseudo-Class) 之 所 以 名 字 中 有 “ 伪 ” 字 ,是 因为 它 所 指定 的 对 象 在 文档 中 并 不 


存在 , 它 指定 的 是 一 个 或 者 与 其 相关 的 选择 符 状态 。 它 的 形 
式 是 “selector: pseudo class (property: value;}”, 即 使 用 英 
文 状态 的 冒号 将 选择 符 和 伪 类 进行 分 隔 。 

伪 类 可 以 让 用 户 在 使 用 页 面 的 过 程 中 增加 更 多 的 互 交 
效果 ,应 用 最 为 广泛 的 就 是 超 链接 a 元 素 的 伪 类 ,其 表现 形 
式 如 图 6-19 所 示 。 

这 里 * :link” 指 的 是 未 访问 的 链接 状态 ;“ :visited” 指 的 
是 已 访问 的 链接 状态 ;“ :active” 指 的 是 被 激活 的 链接 状态 ; 


} 


:link { 


color:blue; 


:visited 


color:purple; 


a:active 


color:red; 


a:hover { 


text-decoration:none; 
color:blue; 
background-color:yellow; 


图 6-19 4528 
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“:hover”" 指 的 是 鼠标 悬 停 到 链接 上 的 状态 。 

【演练 6-7】 (528. 

(O 启动 Dreamweaver CS5, 创建 空白 XHTML 文档 ,在 页 面 中 输入 一 组 表单 ,如 
图 6-20 所 示 。 

© 将 鼠标 定位 在 “代码 ”视图 ,在 本 页 面 head 区 域 创建 相关 CSS 规则 ,如 图 6-21 
所 示 。 


<body> 
<form action="" method="post"> 
<p> 用 户 名 
<input type="text" name="textfield" id="textfield" /> 
</p> 
</form> } 
</body> </style> 


ext/css"> 


und-color:#6CF; /*FË XW NRN +/ 
border:1px solid #000; /* 定 义 边框 粗细 、 类 型 及 其 颜色 */ 


图 6-20 页面 结构 (4) 图 6-21 CSS 规 则 (4) 


© 保存 当前 网 页 文件 ,通过 浏览 器 即 可 看 到 预览 效果 ,如 图 6-22 和 图 6-23 所 示 。 


C WERA - Windows Int... DOR) 
OO [Arwa] OO [e rmBGscovun v | x 
文件 四 RAD FEV @m&Q `: XPO MED FEV BRAW ” 


—D. 


KURR [ë bmnm 


用 户 名 ， 


图 6-22 ”鼠标 未 悬 停 在 文本 框 时 的 效果 图 6-23 ”鼠标 悬 停 在 文本 框 时 的 效果 


本 例 中 ,预先 对 input 元 素 的 鼠标 悬 停 状 态 进行 样式 定义 ,每 当 访 问 者 将 鼠标 悬 停 在 
文本 输入 框 上 面 时 背景 变 为 其 他 颜色 ,边框 线 也 有 变化 ,而 当 文本 框 失去 焦点 时 其 外 观 又 
恢复 到 默认 状态 。 


2. 伪 元 素 


同 伪 类 一 样 , 伪 元 素 创造 了 一 个 虚假 的 元 素 ,并 把 该 元 素 插 入 到 目标 元 素 内 容 之 前 或 
者 之 后 。 伪 元 素 的 具体 内 容 及 其 作用 详 见 表 6-3。 


表 6-3 ATR 
伪 元 素 * 用 

:first-letter 将 特殊 的 样式 添加 到 文本 的 首 字母 

:first-line 将 特殊 的 样式 添加 到 文本 的 首 行 

:before 在 某 元 素 之 前 插入 某 些 内 容 ( 依 据 对 象 树 的 逻辑 结构 ) 

:after 在 某 元 素 之 后 插入 某 些 内 容 ( 依 据 对 象 树 的 逻辑 结构 ) 

演练 元 素 Sa 
【演练 6-8】 伪 元 素 。 p> 
© 启动 Dreamweaver CS5 ,创建 空白 XHTML 文档 ,并 输入 </boay> 
相关 内 容 , 如 图 6-24 所 示 。 图 6-24 页 面 结构 (5) 
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第 6 章 网 页 元 素 一 一 列表 


© 将 鼠标 定位 在 “代码 ?视图 ,在 本 页 面 head 区 域 创 建 相关 CSS 规则 ,如 图 6-25 
所 示 。 
@ 保存 当前 网 页 文件 ,通过 浏览 器 即 可 看 到 预览 效果 ,如 图 6-26 所 示 。 


[S WTR - Windows Internet Explorer 


GƏ- [armsan v| + x [p 
XO SEO SEV MRO IAV WPW — 


e Jess": 器 元 m - 
a “wx i. < geom < | mom 
content: "注意 ， 这 里 在 段落 前 面 增加 了 内 容 ! "7 
font-size: apa; 伪 元 素 
font-family: "微软 雅 黑 "; 
ee 注意 ， 这 里 在 段落 前 面 增加 了 内 容 ! szzerar 
content: "注意 ， 这 里 在 段落 后 面 增加 了 内 容 !"; 一 个 虚假 的 元 素 ， 并 把 该 元 素 插入 到 目标 元 素 内 容 之 前 或 者 之 后 。 


color: #F00; 
font-size:24px; 
font-family:" 方 正 彩 云 简体 "7 


注意 。 这 里 在 段落 后 面 增加 了 内 容 ! 


</style> 是 我 的 电脑 


6-25 CSS 规则 (5) 6-26 ” 伪 元 素 预 览 效 果 


本 例 中 ,为 段落 p 元 素 进行 了 伪 元 素 的 指派 ,从 预览 图 中 可 以 看 出 段落 文字 的 前 后 均 
增加 不 同 字体 类 型 的 文字 ,这 就 是 伪 元 素 的 作用 。 需 要 说 明 的 是 ,要 充分 发 挥 伪 类 与 伪 元 
素 的 应 用 能 力 还 需 浏 览 器 的 支持 ,这 些 应 用 伪 元 素 的 对 象 只 有 在 IE 8 及 其 以 上 版 本 中 才 
能 被 支持 。 


6.2.2 CSS 的 继承 特性 与 特殊 性 


CSS 的 继承 特性 指 的 是 被 包 右 在 内 部 的 标签 拥有 外 部 标签 的 样式 性 质 。 继 承 特 性 
最 典型 的 应 用 通常 发 挥 在 整个 网 页 的 样式 初始 化 阶段 ,对 于 更 为 细致 的 样式 设置 需要 在 
个 别 元 素 中 进行 。 这 项 特性 可 以 给 网 页 设计 者 提供 更 理想 的 发 挥 空间 ,但 同时 继承 也 有 
很 多 规则 ,本 节 就 向 读者 介绍 CSS 的 继承 特性 。 


1. CSS 的 继承 特性 


CSS 的 主要 特征 就 是 继承 (Inheritance) , 它 依 赖 于 祖先 一 子孙 关系 ,这 种 特性 允许 样 
式 不 仅 应 用 于 某 个 特定 的 元 素 , 同 时 也 应 用 于 其 后 代 , 而 后 代 所 定义 的 新 样式 , 却 不 会 影 
响 父 代 样 式 。 

【演练 6-9] CSS 的 继承 特性 。 

(D 启动 Dreamweaver CS5 ,创建 空白 XHTML 文档 ,并 创建 具有 层次 结构 的 内 容 ， 
如 图 6-27 所 示 。 

© 将 鼠标 定位 在 “代码 ”视图 ,在 本 页 面 head 区 域 仅 针对 body 元 素 编写 CSS 规则 
“body (color: #06F;)” 保存 当 前 网 页 文件 ,通过 浏览 器 即 可 看 到 页 面 所 有 文字 颜色 为 
蓝 色 。 此 时 的 效果 说 明 ,无 论 页 面 结构 多 么 复杂 ,子孙 元 素 总 是 继承 父 元 素 的 某 些 属性 。 

© 紧 接 着 单独 为 相关 元 素 进行 样式 定义 ,具体 CSS 规则 如 图 6-28 所 示 。 保 存 当前 
文档 ,通过 浏览 器 可 以 看 到 预览 效果 ,如 图 6-29 所 示 。 
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<style type="text/css"> 


body 1{ 
<body> color: #06F; 
<h2> 学 习 css 有 什么 用 处 </h2> } 
Ss 组 格式 设置 规则 ， 用 于 控制 <span>Web</span> 页 面 的 外 观 。</p> { 
<u color: #F00; 
> 人 css 布局 text-decoration:underline 
<u } 。 /* 定 义 文字 颜色 为 红色 ， SMTA» / 
如 > 表现 和 内 容 相 分 高 </1i> p span { 
<1i> 提 高 页 面 的 <span> 浏 览 速度 </span></1i> font-size: 30px; 
<1i> 易 于 维护 和 改版 </1i> color: #C3F 
</ul> } /= 为 p 元 素 中 的 span 子 元 素 定 义 样式 * / 
</1i> ul li span ( 
<1i>Css 的 各 个 版 本 </1i> color:#F00; 
</ul> }/* 为 1i 元 素 中 的 span 子 元 豪 定义 样式 */ 
</body> </style> 
图 6-27 页 面 结构 (6) 图 6-28 CSS 规则 (6) 


文档 结构 示例 - Windows Internet Explorer 


GO AraC x |/ 
XD MEOD FEV RARO IRAV WHW 
ARER [ag u Øra.. x ü- 


学 习 CSS 有 什么 用 处 


CsS 是 一 组 格式 设置 规则 ， 用 于 控制 W Cb 页 面 的 外 现 。 
Ñ 


。 使 用 CSS 布 局 的 优点 
° 表现 和 内 容 相 分 高 
高 页 面 的 浏览 速度 


629 ”预览 效果 (4) 


本 例 中 ,由 于 单独 为 p 元 素 , 以 及 p 元 素 中 的 span 子 元 素 定 义 样式 ,所 以 span 元 素 
除了 有 具有 独特 的 “字体 增 大 "和 “改变 颜色 ”属性 以 外 ,还 继承 了 p 元 素 中 设置 的 下 画 线 样 
式 , 再 次 体现 CSS 的 继承 特性 。 

总 的 来 说 ,CSS 的 继承 特性 一 直 贯 穿 于 整个 CSS 设计 的 始终 ,利用 这 种 巧妙 的 继承 
关系 ,可 以 大 大 缩短 代码 的 编写 量 , 但 是 继承 还 存在 一 定 的 局 限 性 ,比如 边框 ,边界 和 填充 
属性 是 不 能 继承 的 。 


2. CSS 的 特殊 性 


当 多 个 规则 应 用 到 同一 个 元 素 时 ,权重 越 大 的 
样式 越 会 被 优先 采用 。 为 了 解释 这 个 问题 ,这 里 以 


type="text/css"> 
bo 


a 


示例 形式 进行 讲解 。 J N SN 
【演练 6-10】 CSS 的 特殊 性 。 i color:red; 
O 启动 Dreamweaver CS5 ,创建 空白 XHTML 4S 

文档 ,并 创建 段落 文字 。 <body: 


<p class=" "dx"> 猜 猜 这 里 的 文字 是 什么 颜色 ?</p> 


© 将 鼠标 定位 在 “代码 ”视图 ,在 本 页 面 head </body> 
区 域 创 建 相关 CSS 规则 ,如 图 6-30 所 示 。 保 存 当 前 6-30 ”文档 结构 及 CSS 规则 
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网 页 文件 ,通过 浏览 器 即 可 看 到 页 面 文字 颜色 应 该 为 红色 , 
本 例 中 ,虽然 多 条 CSS 规则 共同 作用 于 p 元 素 上 ,但 由 于 规则 的 特殊 性 不 一 样 的 缘 
故 , 便 呈现 出 最 终 效果 。 
样式 表 中 的 特殊 性 描述 了 不 同 规则 的 相对 权重 , 它 的 基本 规则 是 : 通配符 具有 特殊 
性 值 为 0; 一 个 简单 的 选择 符 (例如 hl) 具 有 特殊 性 值 为 1; 类 选择 符 具 有 特殊 性 值 为 10; 
ID 选择 符 具有 特殊 性 值 为 100; 内 联 样式 (例如 style 一 "") 具 有 特殊 性 值 为 1000。 而 本 
例 中 ,类 选择 符 具 有 最 高 的 特殊 性 ,因此 它 的 权重 最 大 , 故 呈 现 出 红色 外 观 的 字体 。 
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列表 在 导航 中 的 运用 


列表 在 网 页 制作 中 的 应 用 范围 非常 广泛 ,本 节 主 要 向 读者 介绍 最 为 常见 的 列表 应 用 。 


通过 本 节 的 学 习 , 读 者 基本 上 能 够 完成 常规 页 面 的 搭建 。 
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使 用 列表 实现 纵向 导航 


在 默认 状态 下 ,列表 元 素 ul 中 的 列表 项 是 以 纵向 排列 方式 进行 显示 的 ,这 就 为 实现 


纵向 导航 提供 了 良好 的 骨架 结构 。 图 6-31 所 示 的 是 常见 的 纵 
向 导航 ,其 本 质 就 是 使 用 无 序列 表 完 成 的 ,而 其 中 的 美化 图 像 
则 是 通过 “background” 属 性 载 入 到 列表 中 的 。 这 里 以 示例 的 


形式 ,向 读者 介绍 纵向 导航 如 何 实 现 。 
【演练 6-11】 使 用 列表 实现 纵向 导航 。 


O 启动 Dreamweaver CS5., A E5 A KHTML 文档 ,将 光 
标 置 于 页 面 视图 中 ,在 “插入 ”面板 的 “常用 ”选项 卡 中 单 击 “ 插 
À Div 标签 "按钮 ,弹出 “插入 Div 标签 "对话 框 ,在 “插入 ”下 拉 菜 
单 中 选择 “在 插入 点 ”选项 ,在 “ID” 下 拉 列 表 框 中 输入 box, 最 后 


BE 电影 | 电视 剧 (A) otag 
图 今日 团购 旅游 酒店 超 什 订 
g$ 网 上 购物 stessa 
ORIAZ 。 对 色 球 奖 全 计算 器 
网 GERR Re 江湖 恩 仇 录 
J 音乐 | 小 说 未 日 爱情 歌曲 
tg Ea 秦 时 明月 
X 实用 查询 上 网 潭 度 大 提升 
A 我 的 导航 最 近 未 关闭 页 
6-31 ”纵向 导航 


单 击 “ 确 定 ”按钮 , 即 可 在 页 面 中 插入 一 个 名 为 box 的 div 容器 。 
© 在 box 容器 中 ,插入 一 个 无 序列 表 并 添加 相应 的 列表 内 容 ,如 图 6-32 所 示 。 此 
时 ,通过 浏览 器 解析 后 的 效果 如 图 6-33 所 示 。 


<body> 
<div id="box"> 


<ul> 
<li class="ico 1"><a href="#"> 电 视 电 影 </a></1i> 
<1i class="ico 2"><a href="#"> 今 日 团购 </a></1i> 
<li class="ico 3"><a href="#"> 网 上 购物 </a></1i> 
<li class="ico 4"><a href="#"> 音 乐 小 说 </a></1i> 
<li class="ico 5"><a href="#"> 搞 笑 动 混 </a></1i> 
<1i class="ico_6"><a href="#"> 实 用 查询 </a></1i> 

"#"> 我 的 导航 </a></1i> 


<li class="ico 7"><a href=: 
</ul> 


</div> 
</body> 


图 6-32 页 面 结构 (7) 


C 无 标题 文档 - win... E) 


GO ”站 rpHASEeN 同 
XD SAO FEV em 


图 6-33 ”预览 效果 (5) 


Jae] 
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网 页 设计 与 制作 案例 教程 (HTML+TCSSs+Dreamweaver) 


@ 接 下 来 开始 利用 CSS 样式 对 该 导航 进行 美化 ,具体 的 样式 代码 如 图 6-34 所 示 。 
附加 样式 后 ,通过 浏览 器 解析 可 以 得 到 纵向 列表 导航 效果 ,如 图 6-35 所 示 。 


<style type="text/css"> 
ul, li ( 

margin:0; 

padding: 0; 


text-decoration:none; 
font:14px; 
font-family: "微软 雅 黑 "; 


a:hover (text-decoration:underline;) 


~ width:120px; š 
padding: Spx 10px 5px 10px; -一 
border:lpx #aaccee solid; GO B F 教材 编写 汇总 \ 前 可 || 
background: #f3faff; A 

wwo mo rY w" 


#box ul (list-style:none; 
ox ul li ( 


XRRR ss. < @ xm... x 


border-bottom: 1px; 
border-bottom-style: dashed; 


border-bottom-color:#aaccee; E 电视 电影 


fbox ul 1i a 国 今日 团购 
display:block; 
height:28px; F 网 上 购物 
width: 100px;> 
line-height:28px; J 音乐 小 说 


padding-left:22px; 


“ico 1 {background:url (images/002.gif) no-repeat left center;) 
=o_2 {background:url (images/003.gif) no-repeat left center;) 

3 {background:url (images/004.gif) no-repeat left center;) 

4 {background:url (images/005.gif) no-repeat left center;) 

5 {background:url (images/006.gif) no-repeat left center; ) 

6 {background:url (images/007.gif) no-repeat left center; ) 

ico 7 {background:url (images/008.gif) no-repeat left center;) 
</style> 


图 6-34 CSS 规 则 (7) 图 6-35 预览 效果 (6) 


在 本 例 中 ,由 于 导航 不 需要 列表 修饰 符 , 所 以 将 列表 的 样式 设置 为 "none"; 为 了 让 导航 
文字 前 面 显 示 不 同 的 图 标 ,这 里 分 别 定义 .ico_1”~“. ico_7” 不 同 的 类 ,并 使 用 “background” 
RERA R; 二 a 二 标签 属于 内 联 元 素 , 不 具备 高 和 宽 的 属性 ,只 有 将 其 转化 为 块 元 素 
后 才 具 有 高 和 宽 的 属性 ,因此 这 里 使 用 “display:block;” 规 则 将 其 转化 为 块 元 素 , 并 使 文 
字 内 容 向 右 移动 22 像素 的 距离 ,为 载 人 的 图 像 留 出 空间 。 

总 的 来 说 ,这 种 纵向 列表 模式 的 导航 处 理 起 来 相对 简单 ,也 很 容易 理解 ,毕竟 列表 本 
身 就 是 纵向 排列 的 ,只 需 对 列表 最 基本 的 外 在 表现 进行 处 理 就 可 以 满足 需要 。 


6.3.2 使 用 列表 实现 横向 导航 


网 页 中 常见 的 横向 导航 同样 是 采用 无 序列 表 作 为 骨架 而 创建 的 , 它 与 纵向 列表 不 同 
的 仅 是 横向 排列 的 方式 。 要 解决 列表 项 横向 排列 的 问题 ,这 里 引入 “float( 浮 动 ) ”属性 ,该 
属性 能 够 让 对 象 脱离 文本 流 悬 浮 在 其 他 元 素 上 面 。 为 了 更 好 地 演示 横向 导航 的 实现 过 
程 ,这 里 以 示例 形式 进行 讲解 ,至 于 float 属性 更 为 深入 的 知识 将 在 后 续 章 节 进 行 介绍 。 

【演练 6-12】 使 用 列表 实现 横向 导航 。 

O 启动 Dreamweaver CS5 ,创建 新 站 点 ,并 在 其 中 建立 存放 图 像 的 文件 夹 ,将 所 用 素 
材 复制 到 该 文件 夹 中 。 

© 新 建 XHTML XH. UEZ EREK div 容器 ,并 在 其 中 使 用 无 序列 表 盛 放 一 组 
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导航 ,如 图 6-36 所 示 。 在 未 添加 任何 CSS 规则 的 情况 下 ,预览 效果 如 图 6-37 所 示 。 


<body> , — iñu NIBI 02 


<div i navo": 
io 


"/"><span> 首 页 </span></A></1i> 
menu_line"></1i> 
#" target= blank><span> 产 品 </span></A></1i> 
enu_line"><71i> 
#" target=_self><span> RA PÙ</span></A></li> 
'menu_line"><7li> 
#" target= self><span> 技 术 联盟 </span></A></1i> 
menu_line"><71i> 
#" target= self><span> 虚 拟 主机 </span></A></1i> 
'menu_line"></li> 
"#" target= self><span>Wi&amp;W8fr</span></A></1li> 
menu _; line"></1i> 
#" target= self><span>8 板 </span></A></1i> 
menu_line"><71i> 
#" target= blank><span> 服 务 </span></R></1i> 
<li class="menu _line"></li> 
#" target= blank><span> 购 买 </span></R></1i> 
menu _line"><71i> 
#" target= self><span> 帮 助 中 心 </span></A></1i> 
<li class="menu_line"></li> 
<1i><A href="#" target= self><span> 知 识 库 </span></A></1i> 
</ul> 
</div> 
</div> 
</div> 
</div> 
</body> 


2 hre: 


<li class= 


图 6-36 横向 导航 的 结构 图 6-37 预览 效果 (7) 


© 为 导航 编写 盛 放 背 景 图 像 的 相关 规则 ,如 图 6-38 所 示 。 预 览 后 效果 如 图 6-39 
所 示 。 


body { 
font-size:14px; 
background:#e6eae4; 
} 
#navo { 
width: 956px; 
padding-left: 4px; 
height: 45px; 
background: url (images/nav_left.gif) 
no-repeat 
)/* SA SME min. / 
#navi ( 
background:url(images/nav_right.gif) 
no-repeat right top; 
padding-right: 4px; 
189 À “E RUEIEIR C RElig * / 
#menu ( 
height: 45px; 
padding-left:20px; 
background: 
url (images/menu background.jpg) repeat-x; 


1/* 载 入 导航 主体 图 像 ， 并 设置 水 平方 向 平 铺 */ 


图 6-38 CSS 规则 (8) 


= Internet Explorer 
[E ! MPMGSICSABSEPPIR( zi) — NEER 20506-12 BENETAARNGE v G X U 
mü FEV MAW IAD WHY 


ü- D ©- mv- 220- Iv- @- 


图 6-39 预览 效果 (8) 
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此 环节 ,通过 在 依次 嵌 套 的 navo 容器 navi 容器 和 menu 容器 中 载 人 不 同 的 图 像 , 从 而 
实现 了 导航 两 端 具有 圆 角 效果 的 外 观 , 这 种 处 理 方法 在 工作 中 经 常 遇 到 ,希望 读者 仔细 体会 。 

@ 为 了 让 列表 横向 排列 ,这 里 需要 对 列表 设置 浮动 效果 和 鼠标 悬 停 效 果 , 具 体 CSS 
规则 如 图 6-40 和 图 6-41 所 示 。 


#menu ul { 
line-height:150%; 
list-style:none; 
margin:0 0 0 15px; 
padding: 0; 

) 

#nav li { 
float:left; 
height:35px; 

) 


#nav lia { 
display:block; 
height:45px; 
padding-left:5px; 
text-decoration:none; 
color:#FFF; 
text-decoration:none; 
line-height: 45px; 
margin:0 10px 0 10px; #nav li a:hover 
} background:url (images/menu_on_left.gif) 
#nav .menu line { no- et “= top; 
background:url(images/nav_line.gif) colo: 
no-repeat 0 0; = 1⁄° -St, FANAESEAN / 
tn hia “Pacara: uri (images/nenu on_right.gif) 
margin-right: 3px; color p 
margin-left: 3px; float 
] /* 载 入 菜单 中 间隔 断 效 果 图 像 */ A EEA 右 侧 圆 角 图 像 载 入 */ 
图 6-40 设置 列表 外 观 图 6-41 设置 鼠标 悬 停 时 效果 


@ 保存 当前 文件 ,通过 浏览 器 预览 可 看 到 最 终 效果 ,如 图 6-42 所 示 。 


S E r PHGSCS AGENDE 01D — ANERER WS PE-i: ANETNURAGA v + X 
Zo MAO sao PRAW IAD FHV 
RURA xuma 


ENIR Mmari 


图 6-42 最终 预览 效果 


64 商用 案例 一 ”博客 页 面 ”的 设计 与 实现 


博客 网 站 在 日 常生 活 中 经 常 遇 到 ,本 节 就 以 博客 页 面 的 设计 与 实现 为 例 , 巩 固 本 章 的 
相关 知识 。 和 希望 读者 在 模仿 训练 时 ,着重 体会 无 序列 表 在 导航 方面 的 运用 ,以 及 页 面 主体 
区 域 背景 图 像 跟随 内 容 多 少 自 适应 高 度 的 实现 方法 。 


6.4.1 页 面 规 划 


图 6-43 所 示 的 是 该 页 面 的 最 终 效果 ,从 页 面 整个 布局 来 看 ,页 面 分 为 项 部 导航 区 域 、 
头 部 banner 区 域 和 主体 区 域 ,而 主体 区 域 仔 细 划 分 又 可 划分 为 左 侧 主体 内 容 区 域 ,以 及 
右 侧 快速 访问 区 域 。 
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6-43 “博客 页 面 "效果 图 


对 于 页 面 项 部 的 导航 来 说 ,这 里 拟 采用 无 序列 表 进 行 制作 ,为 了 美化 效果 还 将 增加 和 鼠 
标 悬 停 效果 。 

对 于 主体 区 域 而 言 , 这 里 拟 创建 三 个 依次 嵌 套 的 容器 ,分 别 放置 顶部 .中 部 和 底部 三 
种 不 同 的 背景 图 像 , 再 通过 CSS 的 设置 最 终 实现 主体 内 容 区 域 背 景 图 像 跟随 内 容 多 少 高 
度 自 适应 的 效果 。 通 过 深思 熟 虑 的 设计 ,页 面 布局 示意 图 如 图 6-44 所 示 。 


wrapper 
top 
header 
content 
content_top 
content_bot 
content_left content_rightside 
aboutme 
abc 
friend 
abc good 


图 6-44 布局 示意 图 
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6.4.2 定义 站 点 


1. 创建 站 点 


O 启动 Dreamweaver CS5 ,执行 “站 点 ”新 建站 点 ”命令 ,显示 “站 点 设置 对 象 "对 
话 框 , 如 图 6-45 所 示 。 


站 点 设置 对 象 博客 页 面 的 设计 与 制作 


人 
Ba w OS Lses: 可 PEERAERTS MIAN EAREN 
*, PUS S R qel LET Web 上 的 服务 器 上 的 远程 文件 夹 。 
您 可 以 在 此 处 为 Dreamweaver 站 点 选择 本 地 文件 夫 和 各 称 , 
站 点 名 称 :[ 伟 加 页 而 的 设计 与 币 何 ] 


本 地 站 点 文件 夫 : [大吉 大 网 站 ho5 商用 案例 一 博客 页面 功 设 计 与 种 作 | B 


6-45 “站 点 设置 对 象 "对 话 框 


@ 在 此 对 话 框 左 侧 列表 中 选择 “站 点 "选项 ,并 在 右 侧 “站 点 名 称 ” 文 本 框 中 输入 “中 
秋 促 销 ”, 然 后 单 击 必 图 标 按钮 ,为 本 地 站 点 文件 夹 选择 存储 路 径 。 最 后 , 单 击 “ 保 存 ” 按 
钮 ,完成 本 地 站 点 的 创建 。 

@ 在 “文件 ”面板 中 站 点 根 目录 下 分 别 创建 用 于 放 管 图 像 的 “images” 文 件 夹 和 放 管 
CSS 文 件 的 “style” 文 件 夹 。 

@ 将 所 需 图 像素 材 拷贝 到 站 点 的 “images” 文 件 夹 内 。 


2. 创建 空白 文档 


D 执行 菜单 栏 中 的 “文件 ”>“ 新 建 "命令 ,显示 “新 建文 档 ” 对 话 框 。 

© 选择 对 话 框 左 侧 的 “空白 页 "类别, 从 “页 面 类 型 "中 选择 “HTML” 类 型 ,然后 在 “ 布 
局 ” 列 中 选择 “无 ”类 型 。 

© 在 “文档 类 型 "下 拉 菜 单 中 选择 “XHTML 1.0 Transitional” 选 项 ,如 图 6-46 所 示 。 
最 后 单 击 “ 创 建 "按钮 , 即 可 创建 一 个 空白 文档 。 

由 将 该 网 页 保存 在 根 目录 下 ,并重 命名 为 “index. html”, 


3. 创建 CSS 文档 


D 执行 菜单 栏 的 “文件 ”>“ 新 建 " 命 令 , 显 示 “ 新 建文 档 ”对 话 框 。 
© 选择 对 话 框 左 侧 的 “空白 页 ”类 别 , 从 “页 面 类 型 " 列 中 选择 “CSS” 类 型 ,然后 单 击 
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图 6-46 设置 文档 类 型 


“创建 "按钮 , 即 可 创建 一 个 CSS 空白 文档 。 
© 将 此 外 部 CSS 文档 保存 在 style 文件 夹 下 ,并 重 命 名 为 “div. css”, 


4. 将 CSS 文档 链接 至 页 面 


O 打开 index. html 文档 ,在 Dreamweaver CS5 中 执行 “窗口 ”>“CSS 样式 ”命令 , 打 
开 “CSS 样式 ”面板 , 单 击 面板 底部 的 鳃 图 标 按钮 ,此 时 弹出 “链接 外 部 样式 表 ” 对 话 框 。 

© 在 此 对 话 框 中 , 单 击 “ 浏 览 * 按 钮 ,将 外 部 样式 文件 “div. css” 链 接 到 “index. html” 
页 面 中 ,如 图 6-47 所 示 。 

@ 此 时 ,软件 界面 显示 两 个 文件 已 经 链接 ,如 图 6-48 所 示 。 用 户 单 击 某 个 文件 ,可 
以 在 这 两 个 文档 之 间 相 互 切换 。 


链接 外 部 样式 表 


您 也 可 以 输入 去 号 分 隔 的 媒体 关 型 列表 。 


index_htal x SS 
Treanweaver 的 范例 样式 老 可 以 帮助 您 起 步 。 ETRE div. css 
图 6-47 链接 CSS 文档 6-48 ”成 功 链接 


6.4.3 页面 的 具体 实现 


1. 页 面 初始 化 和 导航 的 实现 


O 待 准备 工作 结束 后 ,切换 到 “div. css” 文 档 , 为 整个 页 面 进行 初始 化 定义 ,如 图 6-49 
所 示 。 
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© 切换 到 “index. html” 文 档 中 ,在 “插入 "面板 的 “常用 ”选项 卡 中 单 击 “ 插 入 Div 标 
签 ”按钮 ,弹出 * 插 入 Div 标签 ”对 话 框 ,在 “插入 ”下 拉 菜 单 中 选择 “在 插入 点 ”选项 ,在 “ID” 
下 拉 列 表 框 中 输入 wrapper, 最 后 单 击 “ 确 定 ” 按 钮 , 即 可 在 页 面 中 插入 wrapper 容器 。 

@ 删除 wrapper 容器 内 多 余 文 字 , 在 “插入 ”面板 的 “常用 ”选项 卡 中 单 击 “ 插 入 Div 
标签 ”按钮 ,弹出 “插入 Div 标签 ”对 话 框 ,按照 图 6-50 所 示 的 参数 进行 设置 ,最 后 单 击 “ 确 
定 ?按钮 , 即 可 在 wrapper 内 部 插入 top 容器 。 


body, div, dl, dt, dd, ul, ol, li, 
h1, h2, 
margin 
padding: 0; 


5, hé, p { 


a, a:link, a:visited { 
color: #8d1b0f; 


margin-top: 10px; 
margin-bottom: 10px; 


) A Div 标签 
img (border: none;) =: PE 
leaner (clear: both; 
float 1 (float: left; 新 入 : [在 开始 标签 之 后 M| [<div id="wrapper"y 国 | 


,float r (float: right; 
.fl_img 类 ` 

float: left; 

margin: 3px 30px 15px 0; 
) TE SAN 
.fr_img 

float: right; 

margin: 3px 0 15px 30px; 


ID: [top ` 


6-49 页 面 初始 化 规则 图 6-50 插入 top 容器 


@ 切换 到 “div. css” X, H body 元 素 、wrapper 容器 和 top 容器 创建 CSS 规则 ,如 
图 6-51 所 示 。 保 存 当 前 网 页 文档 ,通过 浏览 器 预览 后 的 效果 如 图 6-52 所 示 。 


body { 
margin: Opx; 
padding: Opx; 
color: #000; 
font-family: "微软 牙 黑 "， "Efe", verdana, 
sans-serif; 
font-size: 14 
line-height:1.5Sem; 
background: #821764 
url(../images/templatemo_body. jpg) ; 


wrapper { 

width:1400px; 

margin:0 auto; 
#top ( 

background 
url(../images/templatemo_menu.jpg) no-repeat 
center top; u 

height:100px; 


6-51 相关 CSS 规则 


Oa dn i DEETAN aS AR EN mastan 1i 
mu mao sv emas av sbs 
— Swar 


EERTE 
nE 


Se 


图 6-52 预览 效果 (9) 
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© 在 top 容器 中 插入 一 组 无 序列 表 用 于 制作 导航 ,页 面 结 构 如 图 6-53 所 示 。 然 后 ， 
在 “div. css” 文 档 中 创建 相关 CSS 规则 ,如 图 6-54 所 示 。 


<body> 
<div id="wrapper"> 
<div id="top"> 


<ul> 
<li><a "> 首页 </a></1i> 
<li><a "> 日 志 </a></1i> 
<li><a "> 相册 </a></1i> 


<li><a href="#"> 博 友 </a></1i> 
<li><a href="#"> 关 于 我 </a></1i> 
</ul> 
</div> 
</div> 
</body> 


图 6-53 页 面 结构 (8) 


#top ul 
list-style:none; 
width:800px; 
margin:0 auto; 


#top ul 1i 

} 

#top ul li a 
display:block; 
width:l41px; 
height:47px; 
float: le 


2px; 
text-align:center; 
padding-top: 20px; 
margin-right:10px; 
text-decoration:none; 


url(../images/templatemo_menu_hover.png 
no-repeat center center 
color: #FFF; 


图 6-54 CSS 规 则 (9) 


@ 保存 当前 网 页 文档 ,通过 浏览 器 预览 后 的 效果 如 图 6-55 所 示 。 

在 本 环节 中 ,使 用 无 序列 表 作为 骨架 盛 放 导航 的 文字 内 容 , 将 超 链接 a 元 素 块 状 化 使 
其 具有 宽 高 属性 ,又 使 a 元 素 向 左 浮动 ,从 而 实现 横向 排列 的 外 观 。 最 后 ,为 a 元 素 设置 
伪 类 效果 ,最 终 实现 鼠标 悬 停 时 有 美化 效果 。 


zmo aav sev eaw Io sn. 


图 6-55 ”顶部 导航 预览 效果 


© 切换 到 “index. html" 文 档 中 ,在 “插入 ”面板 的 “常用 ?选项 卡 中 单 击 * 搬 入 Div 标 
签 ” 按 钮 ,弹出 “插入 Div 标签 ”对 话 框 ,按照 图 6-56 所 示 的 参数 进行 设置 ,最 后 单 击 “ 确 
定 ” 按 钮 , 即 可 在 top 容器 后 面 插入 header 容器 。 

@ 删除 header 容器 内 部 多 余 文 字 , 在 其 中 创建 header_content 容器 ,以 及 相关 文字 
内 容 , 具 体 结构 如 图 6-57 所 示 。 


<body> 


WA Div 标签 


<div id="header conas 
<h2>" 字 泽 互 联 国际 "的 
<p> 各 种 网 站 建设 、 Mia (EREM 贴心 服务 </p> 
</div> 
</div> 
</div> 
</body> 


图 6-56 插入 header 容器 


图 6-57 页 面 结构 (9) 
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© 切换 到 “div. css” XF, H header 容器 及 其 相关 容器 编写 CSS 规则 ,如 图 6-58 所 
示 。 保 存 当 前 网 页 文档 ,通过 浏览 器 预览 后 的 效果 如 图 6-59 所 示 。 


#header 
background: 
url(../images/templatemo_header.jpg) 
no-repeat center top; 
height ; 


#header_conte 
padding-top: 
margin-left:250px; 


#header_c, 


font-size 


color: #FFO; 


margin-left:150p: 
margin-top:40px; 


图 6-58 CSS 规则 (10) 


" 宇 泽 互 联 国际 "的 博客 


Mui BEER 


图 6-59 预览 效果 (10) 


2. 主体 区 域 的 实现 


O 切换 到 “index. html”* 文 档 中 ,参照 图 6-60 所 示 的 参数 ,在 header 容器 后 面 插入 
content 容器 。 按 照 类 似 的 方式 ,在 content 容 
器 内 部 依次 创建 content_top 容器 和 content _ 
bot ras. 2 E= 

这 里 采用 三 层 嵌 套 的 容器 的 目的 是 : 拟 
通过 CSS 规则 分 别 向 三 层 容器 中 载 入 不 同 的 
图 像 ,使 其 具有 跟随 内 容 多 少 自动 适应 高 度 
的 效果 ,示意 图 如 图 6-61 所 示 。 

© 在 了 解 了 实现 原理 后 ,切换 到 “div. css” 文 档 , 为 实现 高 度 自 适应 的 背景 编写 CSS 
规则 ,如 图 6-62 所 示 ,保存 文件 并 通过 浏览 器 预览 即 可 实现 预计 效果 。 

© 根据 页 面 整 体 布局 图 可 知 ,主体 区 域 分 为 左 侧 主要 内 容 区域 和 右 侧 导航 区 域 , 这 
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图 6-60 插入 content 容器 


第 6 章 网 页 元 素 一 一列 表 


<boay> 


templatemo main j 
<jdiv> 
<div id="content"> 
<div id-"content_top">- E contentjpg 


<div id=" - s bot =></div> 


</div> š 
</div> 
</div> 


</body> 


图 6-61 示意 图 (1) 


里 在 content_bot 容器 内 部 依次 创建 并 列 关系 的 content_left 容器 和 content_rightside 容 
器 ,具体 结构 如 图 6-63 所 示 。 


tcontent { 

background: url(../images/templatemo_content.jpg) 
repeat-y center top; 
} 


#content_tep ( 
background:ur1(../images/templatemo_main.jpg) 
no-repeat; <div id="content"> 
} <div id="content_top"> 
#content_bot ( <div id="content_bot"> 
background:url(../images/templatemo_main_bottom.jpg) <div id="content_left" class="float 1"></div> 
no-repeat left bottom; <div id="content rightside" class="float_1" ></div> 


padding:20px 200px 100px 350px; </div> 
width:850px; </div> 
</div> 
图 6-62 CSS 规则 (11) 6-63 页 面 结构 (10) 


@ 由 于 content_left 容器 和 content_rightside 容器 在 结构 中 具有 浮动 效果 ,所 以 这 
两 个 容器 才能 并 列 放置 。 但 正 因为 浮动 效果 ,又 使 得 该 容器 脱离 文档 流 不 受 父 级 容器 控制 ， 
这 里 修改 父 级 容器 的 结构 为 后 续 结构 的 实现 做 准备 。 具 体 修改 的 内 容 如 图 6-64 所 示 。 


<div id="content" class="float 1"> 


<div id="content top" class="float 1"> 增加 父 级 容器 的 浮动 属性 
<div id="content bot" class="float_1": 
<div id="content_left" class="float 1"></div> 
<div id="content_rightside" class="float_1" ></div> 
</div> 
</div> 
</div> 


6-64 修改 后 的 结构 


© 在 content_left 容器 内 部 插入 用 于 盛 放 文 字 和 图 像 的 多 个 容器 ,具体 结构 如 图 6-65 
所 示 。 切 换 到 “div. css” 文 档 ,编写 对 应 的 CSS 规则 ,如 图 6-66 所 示 。 


文章 标题 
abc 容 器 用 于 盛 放 文章 所 有 元 素 作者 信息 


<div id="content_left" class="float (“> 
<div id="abc" class="inbox" > 
<h2><a href="#"> 旅 游 胜 地 推荐 </a></h2 


uthor"> 发 表 于 2013 年 5 月 17 日 </div> 
lages/templatemo image 01.jpg" width="420" height="150" /> 
/1 


文章 配 图 


段落 文本 
iv id="num" / 音 序 
rd id="num"> IT, div> 文章 序号 


</div> 


图 6-65 ”页面 结 构 (11) 


© 复制 abc 容器 内 所 有 内 容 , 将 其 粘贴 在 abc 容器 后 面 , 即 可 创建 结构 相同 的 页 面 内 
容 。 保 存 当前 文件 后 ,通过 浏览 器 预览 即 可 看 到 效果 ,如 图 6-67 所 示 。 至 此 ,主体 区 域 中 
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#content left { 
width:530px; 
margin-right: 70px; 
) 
#content_rightside ( 
width:200px; 
) 
„inbox ( 
margin-bottom:20px; 
border-bottom:lpx #999 dashed; 
) 
tabc ( 
position:relative; 
) 
#num { 
width:96px; 
height: 98px; 
background: 
url(../images/templatemo_date.png) 
no-repeat; 
position:absolute; 
top:l0px; 
left:-110px; 
font-size:20px; 
font-weight:bolder; 
color: #FFF; 
padding:45px 0 0 30px; 


图 6-66 CSS 规则 (12) 图 6-67 预览 效果 (11) 


左 侧 内 容 区 域 已 经 制作 完 


© 在 主体 区 域 中 右 侧 内 容 区 域 content_rightside 容器 内 部 ,根据 需要 使 用 相关 容器 


作为 骨架 盛 放 文字 内 容 , 如 图 6-68 所 示 。 


<div id="content rightside" class="float 1" > 
<div id="aboutme" class="siderbox"> 
<h2> 关 于 我 </h2> 
<img src="images/ava.png" width="140" height="140" /> 
<p>Email:wufeng11210126.com<br /> 
博客 等 级 ，1 级 <br /> 
今日 访问 : 1356<br /> 
总 访问 量 : 512689<br /> 
景 后 登录 : 2012-05-17 07:36<br /> 
</p> 
</div> 
</div> 


6-68 ”页 面 结构 (12) 


切换 到 “div. ess 文档, 编写 对 应 的 CSS 规则 ,如 图 6-69 所 示 。 通 过 浏览 器 预览 后 


的 效果 如 图 6-70 所 示 。 


-siderbox i 
margin-bottom:20px; 
上 
-siderbox h2 ( 
border-bottom:lpx #804000 dashed; 
line-height:30px; 
margin-bottom: 10px; 


图 6-69 CSS 规则 (13) 图 6-70 预览 效果 (12) 
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© 在 aboutme 容器 后 面 ,依次 插入 并 列 关系 的 friend 容器 和 good 容器 ,并 应 用 
siderbox 类 规则 ,然后 在 新 建 的 容器 内 部 插入 如 图 6-71 所 示 的 结构 。 切 换 到 “div. css” X: 
档 ,编写 对 应 的 CSS 规则 ,如 图 6-72 所 示 。 保 存 页 面 文档 ,通过 浏览 器 预览 即 可 看 到 最 终 
的 页 面 效果 。 至 此 ,“ 博 客 页 面 " 的 全 部 设计 制作 过 程 已 经 介绍 完成 ,读者 可 以 根据 自己 的 
喜好 ,修改 部 分 图 像 和 CSS 规则 ,使 其 呈现 更 加 漂亮 的 外 观 。 


<div id="content_rightside" class="float 1" > 


</i> 多 幅 图 像 链接 
<div id="friend" class="siderbox"> 
<h2> 博 友 </h2> 
<div class="boyou"><a href="#"><img Sr...</a></div> 
</div> 
<div id="good" class="siderbox"> -boyou a ( 
<h2> 发 现 好 博客 </h2> display:block; 
<div class="boyou"><a href="#">Kimg sr...]</a></div> float:left; 
</div> margin:0 5px 10px 0; 
</div> 
图 6-71 页 面 结构 (13) 图 6-72 CSS 规 则 (14) 
65 实 训 
1. 实 训 要 求 


参考 本 例 提供 的 源 文件 ,仔细 分 析 页 面 布局 ,使 用 “DIV 十 CSS” 的 模式 制作 网 页 。 制 
作 过 程 中 ,着 重 使 用 无 序列 表 作为 网 页 骨架 实现 局 部 的 布局 。 


2. 过 程 指导 


D 首先 ,打开 源 文 件 , 观 察 该 网 页 通过 浏览 器 预览 后 的 效果 。 然 后 ,根据 自己 的 理解 
尝试 规划 页 面 布局 。 最 后 ,查看 源 文件 的 页 面 结 构 布 局 ,与 自己 的 布局 思路 加 以 对 比 ,学 
习 其 中 的 布局 思想 。 

© 启动 Dreamweaver CS5, 并 创建 站 点 。 在 站 点 内 创建 “images ”文件 夹 和 "style” 文 
件 夹 。 分 别 创 建 空白 网 页 文档 和 外 部 CSS 文 ar C C C 
档 ,然后 将 两 者 链接 起 来 。 logo 

@ 根据 需要 设计 规划 页 面 整个 布局 ,示意 [page 
图 如 图 6-73 所 示 。 sidebar- | | content 

@ 参照 布局 示意 图 ,依次 创建 header 容 
器 logo 容器 、page 容器 和 footer 容器 。 

O 根据 示意 图 中 各 容器 之 间 的 关系 ,参照 
源 文件 中 的 结构 细 化 各 容器 内 部 的 结构 。 在 此 
过 程 中 ,根据 需要 创建 对 应 的 CSS 规则 。 

保存 所 有 文件 ,在 浏览 器 中 预览 并 修改 ， footer 
最 终 效果 可 参照 图 6-74。 图 6.73 示意 图 (2) 
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6-74 最终 效果 


66 7J 题 

1. 列表 的 类 型 有 哪些 ? 简 述 各 类 型 间 的 相同 点 和 不 同 点 。 

2. 举例 说 明 ,在 常见 的 网 页 中 哪些 部 分 是 使 用 列表 作为 骨架 创建 的 。 

3. 什么 是 伪 类 ? 什么 是 伪 元 素 ? 

4. 请 描述 伪 类 在 超 链 接 中 应 用 时 实现 的 效果 。 

5. 什么 是 CSS 的 继承 特性 ? 什么 是 CSS 
的 特殊 性 ? OO [er mnmgrevn v o x [D oaa 

. HO MAD FEV KRW IAV MMY 

6. 横向 导航 在 实现 过 程 中 ,其 核心 内 容 是 >ems aa aÐ 
什么 ? 

7. 利用 无 序列 表 的 知识 ,实现 如 图 6-75 所 ii kat lds bad la tas 
示 的 列表 外 观 。 === a 

8. 仔细 分 析 图 6-76 所 示 的 页 面 ,使 用 无 序 . gi [2013-07-12] 


[2013-08-12] 


列表 实现 顶部 导航 效果 ,以 及 整个 页 面 。 
9. 利用 列表 相关 知识 ,实现 图 6-77 所 示 的 


纵向 导航 。 图 6-75 “习题 7 对 应 图 
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全 部 商品 分 类 
Zso mav meo asaw IAD WO 
kear ene n 图 书 音 | 》 
š PRE > 
À P > 
PRODUCTION bm > 
ee $ REER > 
a RURA > 
a 饰品 > 
a ”钟表 /眼镜 /珠宝 > 
db 运动 户外 > 
O 康 体 / 保 健 / 成 人 > 
w 食品 / 茶 / 酒 。 > 
口 手机 数码 > 
J 电脑 办公 > 
G 家 电 /汽车 用 品 > 
图 6-76 习题 8 对 应 图 图 6-77 习题 9 对 应 图 


10. 使 用 本 章 知 识 , 制 作 如 图 6-78 所 示 的 页 面 , 要 求 制作 过 程 中 认真 体会 列表 在 页 
面 布局 中 的 应 用 。 


sfor - KIPA 

XPO REV 查看 YY) HLO HEW IAV MBW 
` C x @ x 3 @ 

BEL] E3 


TEA & MEAL 


TASTE THE BEST MEAL WITH THE BEST TEA- 


ERNI 
EINAN. URTO. senatmys REUFR-AHISLNAZHT SE FR. QANSKESAHNRE. HR. XAN. VE. BAE. VAL, ASAT 
menapka.susnktaswaq +umsnsatomt- -ERF Ratran SERF. S U. ATN- 
#GRSEñnt&. Read mor ad mor SETFR. Read n 


Copyright © 2011 wuyuze | Designed by wf 


Ë+ t> o° Š 


6-78 习题 10 对 应 图 
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口 掌握 创建 和 编辑 表格 的 基本 方法 。 

口 掌握 与 表格 相关 的 CSS 属性 。 

口 掌握 浮动 和 清除 浮动 的 方法 。 

口 能 够 灵活 运用 相对 和 绝对 定位 解决 实际 问题 。 

虽然 表格 布局 页 面 的 时 代 已 经 结束 ,但 并 不 代表 表格 就 一 无 是 处 。 目 前 ,表格 已 经 回 
归 到 应 有 的 组 织 数据 方便 查询 和 浏览 的 功能 上 来 。 本 章 主要 从 表格 的 创建 和 编辑 ,以 及 
与 表格 相关 CSS 内 容 出 发 ,详细 介绍 表格 在 储存 数据 的 同时 是 如 何 被 美化 的 。 


71 È 格 


表格 由 一 行 或 多 行 组 成 ,而 每 行 又 由 一 个 或 多 个 单元 格 组 成 ,用 于 显示 数字 和 其 他 内 
容 。 表 格 中 的 单元 格 是 行 与 列 交 叉 的 部 分 , 它 是 组 成 表格 的 最 小 单位 。 单 元 格 可 以 拆 分 ， 
也 可 以 被 合并 。 


7.1.1 创建 表格 


在 Dreamweaver CS5 中 有 多 种 方法 能 够 创建 表格 ,下 面 以 示例 形式 介绍 如 何 创建 

【演练 7-1】 创建 表格 。 

O 启动 Dreamweaver CS5 ,创建 空白 XHTML 文档 ,将 光标 定位 在 要 插入 表格 的 位 
置 ,然后 执行 软件 菜单 栏 中 的 “插入 ”一 “表格 "命令 ,或 者 在 “插入 ”面板 “常用 ”类 别 中 , 单 
击 表 格 按钮 ,如 图 7-1 所 示 ,这 时 打开 如 图 7-2 所 示 的 对 话 框 。 

在 “表格 "对话 框 中 ,各 参数 的 含义 如 下 。 

。 行 数 : 指 的 是 表格 中 行 的 数目 。 

。 列 数 : 指 的 是 表格 中 列 的 数目 。 

° 表格 宽度 : 以 像素 为 单位 或 按 占 浏览 器 窗口 宽度 的 百分比 指定 表格 的 宽度 。 

° 边框 粗细 : 以 像素 为 单位 ,设置 表格 边框 的 宽度 。 若 设置 为 0, 则 在 浏览 时 不 显示 

表格 边框 。 


3 
A 


aero [3 E @ 
JE] 
zG 
# 


图 7-1 使 用 “插入 ”面板 中 按钮 创建 表格 图 7-2 “表格 ”对 话 框 


。 单元 格 间距 : 相 邻 的 表格 单元 格 之 间 的 像素 数 。 

。 单元 格 边 距 : 确定 单元 格 边框 与 单元 格 内 容 之 间 的 像素 数 。 

。 无 : 对 表格 不 启用 列 或 行 标题 。 

。 左 : 将 表格 的 第 一 列 作为 标题 列 。 

。 顶部 : 将 表格 的 第 一 行 作为 标题 行 。 

。 两 者 : 能 使 用 户 在 表格 中 输入 列 标题 和 行 标题 。 

° 标题 : 显示 在 表格 外 的 表格 标题 。 

。 摘要 : 表格 的 说 明 信 息 。 

© 在 图 7-2 中 ,将 行 数 设置 为 “3”, 列 设置 为 "3”, 表 格 宽度 设置 为 "100%”, 边 框 粗细 
设置 为 “1 像素 ,单元 格 边框 设置 为 “2”, 单 元 格 间距 设置 为 “2”, 在 标题 区 域 选择 “顶部 ”， 
单 击 “ 确 定 ” 按 钮 , 即 可 插入 3 行 3 列 的 表格 ,如 图 7-3 所 示 。 


H 100% (480) >. 


73 创建 表格 


需要 注意 的 是 ,由 于 Dreamweaver 具有 自动 记忆 功能 , 当 青 次 打开 “表格 ”对 话 框 时 ， 
对 话 框 内 部 的 参数 是 上 一 次 设置 留 下 的 参数 设置 。 


7.1.2 添加 表格 内 容 


创建 好 表格 后 ,就 可 以 向 表格 中 添加 内 容 了 。 在 Dreamweaver 中 可 以 向 表格 中 添加 
文本 .图像 , 以 及 嵌 套 另 一 表格 。 
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1. 添加 文本 和 图 像 


【演练 7-2】 添加 文本 和 图 像 。 

O 启动 Dreamweaver CS5 ,创建 空白 XHTML 
文档 ,插入 4 行 6 列 的 表格 ,具体 参数 设置 如 图 7-4 
所 示 。 

© 将 光标 定位 在 第 一 行 第 一 列 单元 格 中 ,在 
“插入 ”面板 “常用 ”类 别 中 , 单 击 “ 图 像 ” 按 钮 ,在 弹 
出 的 对 话 框 中 选择 要 插入 的 图 像 。 最 后 , 单 击 “ 确 
定 ” 按 钮 ,图 像 即 可 插入 到 当前 单元 格 中 。 

© 参照 第 四 步 操作 ,在 表格 第 一 行 中 插入 多 
个 图 像 ,如 图 7-5 BUR, TE MAPED 

@ 将 光标 定位 在 表格 的 第 二 行 第 一 列 , 直 接 输入 文字 ,或 将 其 他 文本 内 容 复 制 粘贴 
到 当前 单元 格 中 即 可 插入 文字 内 容 ,如 图 7-6 所 示 。 


1 
图 7-5 插入 多 幅 图 像 图 7-6 插入 文字 
通过 预览 可 以 看 出 ,页 面 文字 效果 并 不 理想 ,这 里 将 鼠标 定位 在 “代码 ”视图 中 ,在 


本 页 面 head 区 域 创建 相关 CSS 规则 ,如 图 7-7 所 示 。 
@ 保存 当前 页 面 文档 ,再 次 通过 浏览 器 预览 即 可 看 到 满意 效果 ,如 图 7-8 所 示 。 


O ramscewn + x [上 
SaD 查看 QD PRAW IAW 


<style type="text/css"> 


Tont: 14px "微软 雅 黑 "; 
color: #FFF; 

background: #218fe8; 
text-align:center; 


border-bottom:lpx #FFF solid; 
border-left:lpx #FFF solid; 


} 
</style> 


图 7-7 CSS 规则 (1) 图 7-8 最 终 效果 (1) 


在 制作 过 程 中 , 当 插 入 图 像 时 表格 的 宽度 会 自动 变化 ,而 且 插 入 文字 时 默认 状态 为 
“ 左 对 齐 ”, 如 果 想 要 精确 控制 表格 内 的 宽度 、 高 度 ,以 及 文字 的 位 置 就 需要 使 用 CSS, 更 多 
知识 将 在 后 续 案例 中 体现 ,请 读者 细心 体会 。 

2. RER 

【演练 7-3】 WEKT. 

O 创建 空白 XHTML 文档 ,插入 4 行 3 列 的 表格 。 
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@ KERE fu TE a EE KER BJ Bñ uë A AIT A SRK e TF RA” 
对 话 框 ,参数 设置 如 图 7-9 所 示 。 
© 设置 好 参数 后 , 单 击 “确定 ?按钮 , 即 可 在 表格 内 部 嵌 套 一 个 表格 ,如 图 7-10 所 示 。 


: Ë A: [2 
表格 宽度 : |200 k x 


10039 158(938< 160 Q01) 
sos 


图 7-9 Aska 53 图 7-10 WERK 


7.1.3 表格 基本 操作 


要 对 表格 进行 编辑 ,就 要 选择 表格 待 编辑 的 区 域 。 用 户 可 以 一 次 选择 整个 表 、 行 或 
列 ,也 可 以 选择 一 个 或 多 个 单独 的 单元 格 。 


1. 选择 表格 与 单元 格 


(1) 选择 整个 表格 

有 多 种 方法 可 以 选择 整个 表格 ,具体 操作 如 下 。 

方法 一 : 将 鼠标 移动 到 表格 的 上 下 边框 ,或 表格 的 四 个 项 角 , 当 鼠标 变 成 表格 网 格 图 
标 甸 时 , 单 击 即 可 选择 整个 表格 ,如 图 7-11 所 示 。 

方法 二 : 将 光标 定位 在 表格 内 任意 位 置 .然后 在 “文档 "窗口 左下 角 的 标签 选择 器 中 
选择 二 table 二 标签 , 即 可 选择 整个 表格 ,如 图 7-12 所 示 。 


*luntitlea-i (xmna)* = 


鼠标 变 成 
表格 网 格 图 标 


s00% 


body> <table) <tr> Kta) RQ v x 137v 1 K / 1 Ë Unicode M 


7-11 单 击 上 边框 选择 整个 表格 
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*luntitlea-i (zETuL)* = 136 


上 一 一 一 -局 选择 <table> 标 签 E + i 


TION [R] Q HOO nv |523 x 137v 1 K / 1 Ë Unicode QM 


图 7-12 使 用 标签 选择 器 选择 整个 表格 


方法 三 : 将 光标 定位 在 表格 内 任意 位 置 , 单 击 鼠 标 右键 ,在 弹出 的 右键 菜单 中 选择 
“表格 ”一 “选择 表格 ”命令 选项 , 即 可 选择 整个 表格 。 

方法 四 : 将 光标 定位 在 表格 内 任意 位 置 ,在 软件 菜单 栏 中 执行 “修改 >“ 表格” 一 “ 选 
择 表格 "命令 选项 , 即 可 选择 整个 表格 。 

上 述 四 种 方法 ,无 论 使 用 哪 种 方法 ,只 要 表格 被 选中 ,表格 四 周 就 会 出 现 黑色 边框 ,并 
且 显 示 表 格 控制 柄 。 当 鼠标 移动 到 控制 柄 上 时 ,鼠标 会 变 成 双向 箭头 ,此 时 拖 动 鼠标 即 可 
调整 表格 大 小 。 

(2) 选择 单元 格 

要 选择 表格 中 的 单元 格 ,可 以 通过 以 下 几 种 方法 。 

方法 一 : 将 光标 定位 在 表格 内 ,根据 需要 拖 动 鼠标 , 即 可 选中 一 个 或 多 个 连续 的 单元 
格 , 如 图 7-13 所 示 。 


*luntitlea-i (xmna)* = 


| 


@ody>[Gtable3 (RIQ low vox 137v 1 K / 1 Ë Unicode Qn 


7-13 ” 拖 动 鼠标 选择 单元 格 


方法 二 : 按 下 Ctrl 键 不 放 单 击 目标 单元 格 , 即 可 选中 一 个 单元 格 。 如 果 连 续 单 击 多 
次 , 则 可 以 选中 多 个 不 连续 的 单元 格 ,如 图 7-14 所 示 。 


E untitlea-i (zana)y sh 


(body> Ktable) [R] Q 10%  , 523 x 137v 1K71% Unicode M 


图 7-14 选择 多 个 不 连续 的 单元 格 
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方法 三 : 将 光标 定位 在 表格 内 任意 位 置 , 按 Shift 键 的 同时 单 击 其 他 单元 格 ,可 以 选 
择 矩 形 区 域内 的 所 有 单元 格 , 如 图 7-15 所 示 。 


*untitlea-i (zETuL)* AE 


— Ñ . 


s0% 


body? Ktabl) mM Q 100% ~v 523 x 137v 1K71% Unicode M 


图 7-15 选择 矩形 区 域内 的 所 有 单元 格 


2. 拆 分 、 合 并 表格 


拆 分 指 的 是 将 一 个 单元 格 拆 分 为 多 个 单元 格 ; 合并 指 的 是 将 多 个 单元 格 合并 为 一 个 
单元 格 。 在 实际 工作 中 ,这 些 基 本 操作 经 常 遇 到 ,下 面 以 示例 的 形式 介绍 如 何 拆 分 、 合 并 
表格 。 

【演练 7-4】 拆 分 、 合 并 表格 。 


O 创建 空白 XHTML 文档 ,插入 2 行 2 列 的 Bis = = = 
表格 ,具体 表格 参数 如 图 7-16 所 示 。 sie m 


© 选择 表格 的 第 一 行 单 元 格 , 执 行 “修改 "一 smene: o JE 
“表格 ”>“ 拆 分 表格 ”命令 ,或 者 在 “属性 ”面板 中 单 = = === 


击 鞍 按钮 ,再 或 者 单 击 鼠 标 右键 ,在 右键 菜单 中 选 
择 “ 表 格 ”>“ 合 并 表格 ”选项 , 即 可 将 多 个 单元 格 合 = 
并 为 一 个 单元 格 。 | C C a] 
需要 特别 注意 的 是 ,合并 单元 格 时 所 选中 的 单 
元 格 必须 是 连续 的 ,并 且 选 定 的 区 域 必须 是 矩形 。 
O 在 合并 后 的 单元 格 内 输入 相关 文字 ,此 时 效 
果 如 图 7-17 所 示 。 


图 7-16 插入 表格 (2) 


0w 


7-17 合并 单元 格 


@ 按 Ctrl 键 单 击 第 二 行 第 一 列 单元 格 ,此 时 该 单元 格 处 于 被 选中 状态 。 然 后 在 软件 
菜单 栏 中 执行 “修改 ”表格 ”~“ 拆 分 表格 命令 ,或 者 在 “属性 ?面板 中 单 击落 图 标 按 
钮 ,再 或 者 单 击 鼠 标 右键 ,在 右键 菜单 中 执行 “表格 ”>“ 拆 分 表格 "命令 。 

© 此 时 弹出 如 图 7-18 所 示 的 对 话 框 。 在 “把 单元 格 拆 分 "选项 后 选择 要 拆 分 为 行 还 
是 列 , 然 后 在 “ 行 数 ( 列 数 )" 文 本 框 中 输入 具体 拆 分 的 行 数 ( 列 数 )。 这 里 选择 “ 列 " 单 选 按 
钮 ， 列 数 ?设置 为 “2”, 最 后 单 击 “ 确 定 ” 按 钮 , 即 可 完成 单元 格 拆 分 。 
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© 选择 拆 分 后 的 单元 格 , 即 第 二 行 中 间 的 单元 格 , 执 行 “ 修 改 ”>“ 表 格 ”>“ 拆 分 表 
格 ” 命 令 , 在 弹出 的 “ 拆 分 单元 格 ”对 话 框 中 选择 “ 行 " 单 选 按钮 ,“ 行 数 ” 设 置 为 “5”, 最 后 单 
击 “ 确 定 ” 按 钮 , 即 可 将 该 单元 格 拆 分 为 4 行 , 如 图 7-19 所 示 。 


把 单元 格 拆 分 O G QD 
onm 


图 7-18 “ 拆 分 单元 格 ” 对 话 框 7-19 将 单元 格 拆 分 为 5 行 


@ 在 拆 分 后 的 单元 格 内 插入 相关 图 像 和 文字 。 为 了 进一步 美化 表格 效果 ,这 里 在 页 
面 head 区 域 创建 相关 CSS 规则 ,如 图 7-20 所 示 。 保 存 当 前 网 页 ,通过 浏览 器 预览 可 以 看 
到 效果 ,如 图 7-21 所 示 。 


<sty1e type="tezt/oss"> 无 标题 文档 - Windows Internet Explorer 
table [ - 

font:16px/1.5 "WREE"; GO [er mamsceaunsmgmn v| x | 

border:2px solid #ccc; 二 人- 

PP 文件 中 BED FFV MAW IAD HHU 
) ARAR ss. < BIE.. x Ñ D Oar mv so 


th, td { 
项 目 化 教学 任务 细 化 表 


text-align:left; 
padding: . Sem; 
border:lpx solid #FFF; 
) 
th { 
background: #328aa4 
url (images/tr_back.gif) repeat-x; 
color:#fff; 
text-align:center; 
) 
td { 
background:#e5flf4; 


} 
</style> 


图 7-20 CSS 规 则 (2) 图 7-21 预览 效果 (1) 


3. 行 与 列 的 删除 


在 对 表格 进行 编辑 时 ,经 常 遇 到 之 前 创建 的 表格 行 或 列 不 能 满足 实际 需求 ,需要 添加 
或 删除 行 与 列 的 情况 ,下面 使 用 多 种 方法 介绍 此 类 操作 。 

【演练 7-5】 行 与 列 的 删除 与 添加 。 

O 创建 空白 XHTML 文档 ,插入 4 行 2 列 的 表格 ,分 别 在 第 一 行 和 第 三 行 插入 2 幅 
图 像 ,在 第 二 行 和 第 四 行 插入 相关 文字 ,此 时 效果 如 图 7-22 所 示 。 

O 若 需要 删除 行 或 列 时 ,可 以 使 用 以 下 两 种 方法 。 

方法 一 : 选择 完整 的 一 行 或 列 ,然后 在 软件 菜单 栏 中 执行 “编辑 ”清除 ?命令 ,或 者 
直接 按 Delete 键 即 可 删除 完整 的 一 行 或 列 。 

方法 二 : 将 鼠标 定位 在 要 删除 的 行 或 列 中 的 一 个 单元 格 ,然后 在 软件 菜单 栏 中 执行 
“修改 "一 “表格 ”一 删除 行 ?命令 ,或 执行 “修改 "表格 ”一 删除 列 ” 命 令 。 

© 若 要 添加 行 或 列 时 ,可 以 使 用 以 下 三 种 方法 。 

方法 一 : 将 光标 定位 在 要 添加 行 ( 列 ) 单 元 格 的 内 部 ,在 软件 菜单 栏 中 执行 “插入 ”一 
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7-22 插入 4 行 2 列 的 表格 7-23 HATT 


“表格 对 象 ”命令 ,在 其 子 菜单 中 根据 需要 选择 其 中 某 个 选项 , 即 可 添加 行 或 列 。 

方法 二 : 将 光标 定位 在 要 添加 行 ( 列 ) 单 元 格 的 内 部 , 单 击 鼠 标 右键 ,在 右键 菜单 中 选 
择 “ 表 格 ”>“ 插 入 行 ( 列 )” 选 项 。 在 此 情况 下 ,默认 的 是 将 行 ( 列 ) 插 入 到 光标 所 在 单元 格 
的 上 ( 左 ) 面 ,如 图 7-23 所 示 。 

方法 三 : 如 果 在 右键 菜单 中 选择 “插入 行 或 列 ” 选 


项 , 则 打开 如 图 7-24 所 示 的 对 话 框 。 在 此 对 话 框 中 ， mA 

可 以 在 “插入 ”选项 后 面 选 择 要 插入 的 是 行 还 是 列 , 在 a 

“ 列 数 ( 行 数 )" 后 面 ,可 以 设置 列 ( 行 ) 数 ,在 “位 置 "选项 em Osmmzno 

后 面 可 以 设置 插入 列 ( 行 ) 的 位 置 。 最 后 , 单 击 “确定 ” 

按钮 , 即 可 插入 行 或 列 。 图 7-24 “插入 行 或 列 "对 话 框 


7.1.4 表格 和 单元 格 的 属性 设置 


表格 的 属性 设置 可 以 通过 软件 的 “属性 ?面板 来 完成 ,属性 设置 包括 两 部 分 ,一 是 对 整 
个 表格 的 设置 ; 二 是 对 单元 格 的 属性 设置 。 


1. 表格 的 属性 
当 表 格 被 选中 时 ,属性 ?面板 会 显示 出 有 关 表 格 的 各 种 属性 ,如 图 7-25 所 示 。 


E m GE | gwo x ~ aso ”对齐 多 [KU ~ SOE x| 
一 NOR meo imo 


"ss... = eTe] 
5 


SG 


图 7-25 表格 的 属性 


在 表格 的 “属性 ”面板 中 ,各 项 含义 如 下 。 
。 表格 : 用 于 设置 表格 的 名 称 。 
。 行 与 列 : 用 于 设置 表格 中 行 和 列 的 数量 。 
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网 页 设计 与 制作 案例 教程 (HTML+TCSSs+Dreamweaver) 


° 宽 : 用 于 设置 表格 的 宽度 ,以 像素 为 单位 或 表示 为 占 浏览 器 窗口 宽度 的 百分比 。 
通常 不 需要 设置 表格 的 高 度 。 
填充 : 用 于 设置 单元 格 内 容 和 单元 格 边框 之 间 的 距离 , 它 以 像素 为 单位 。 

° 间距 : 用 于 设置 相 邻 单元 格 之 间 的 距离 , 它 以 像素 为 单位 。 

。 对 齐 : 用 于 设置 表格 相对 于 同一 段落 中 的 其 他 元 素 ( 如 文本 或 图 像 ) 的 显示 位 置 。 

包括 “ 左 对 齐 ”“ 右 对 齐 ”“ 居 中 对 齐 ” 和 “上 默认 ”4 种 选项 。 

° 边框 ; 用 于 设置 表格 边框 的 宽度 ,以 像素 为 单位 。 

。 类 : 用 于 将 CSS 规则 应 用 在 当前 表格 对 象 上 。 

° 总 按钮 : 清除 列 宽 ,从 表格 中 删除 所 有 明确 指定 的 列 宽 。 

° FH: 清除 行 高 ,从 表格 中 删除 所 有 明确 指定 的 行 高 。 

。 AH: 将 表格 宽度 转换 成 像素 。 

。 AFRE: 将 表格 宽度 转换 成 百分比 。 

通过 “属性 ”面板 的 设置 ,这 里 插入 了 一 个 宽度 为 300 像素 ,2 行 2 列 ,填充 为 20 像 
素 , 间 距 为 30 像素 ,无 边框 的 表格 ,如 图 7-26 所 示 。 


T.. SANER NEASIRI IE. htel (XHTIO)* Dx 


表格 内 容 | | 表格 内 容 | 


| 
间距 


— + — 
300 ~ 一 -一 


<body> Ktabl) Ro qnos vmxo 


图 7-26 设置 表格 属性 


2. 单元 格 的 属性 


在 “属性 ”面板 打开 的 情况 下 , 按 Ctrl 键 , 单 击 一 个 或 多 个 单元 格 。 此 时 ,在 “属性 ? 面 
板 中 就 可 以 对 单元 格 进行 设置 了 ,图 7-27 所 示 的 是 完全 展开 的 “属性 ?面板 。 


属性 

[Om tD | 无 ` L v BZ BE;zuugmoO @ 
本 cs mO £ v EQ "oO gE 2 
下 sre KFOBU v ED 5 不 执行 @) 口 WEBeGO [U 

一 口头 soru < ay s800 


7-27 单元 格 “ 属 性 ”面板 


在 此 “属性 ”面板 中 包含 两 部 分 内 容 。 上 半 部 分 用 于 设置 单元 格 内 部 文本 的 相关 属 
性 ,下 半 部 分 用 于 对 单元 格 进行 设置 ,其 中 各 参数 的 含义 如 下 。 
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° 水平: 用 于 设置 单元 格 内 容 的 水 平 对 齐 方式 ,包含 默认 、 左 对 齐 、 右 对 齐 和 居中 对 
齐 4 种 选项 。 

。 垂直 : 用 于 设置 单元 格 内 容 的 垂直 对 齐 方式 ,包含 默认 、 顶 端 \ 居 中 、 底 部 和 基线 
5 种 选项 。 

。 宽 和 高 : 以 像素 为 单位 或 按 整个 表格 宽度 或 高 度 的 百分比 为 单位 ,计算 所 选单 元 
格 的 宽度 和 高 度 。 

° 不 换行 : 选中 该 复 选 框 , 则 单元 格 中 的 所 有 文本 都 在 一 行 上 。 对 于 超出 宽度 的 内 

容 ,单元 格 会 加 宽 来 容纳 所 有 数据 。 

标题 : 选中 该 复 选 框 , 则 将 所 选 的 单元 格格 式 设置 为 表格 标题 单元 格 。 默 认 情 况 

下 ,表格 标题 单元 格 的 内 容 为 粗 体 并 且 居 中 。 

。 背景 颜色 : 用 于 设置 单元 格 的 背景 颜色 。 

。 页 面 属性 : 单 击 该 按钮 ,可 以 打开 “页 面 属性 ”对 话 框 。 

。 回 按钮 : 单 击 该 按钮 ,可 将 所 选 的 单元 格 、 行 或 列 合 并 为 一 个 单元 格 。 当 选择 的 
单元 格 形成 矩形 或 直线 的 块 时 此 按钮 才 被 激活 。 

。 JERA: 单 击 该 按钮 ,可 将 一 个 单元 格 分 成 两 个 或 更 多 个 单元 格 。 当 选择 的 单元 
格 多 于 一 个 时 , 则 此 按钮 将 禁用 。 


72 与 表格 相关 的 CSS 属性 及 其 应 用 


E XHTML 中 与 表格 相关 的 标签 有 table th ,tr 和 td 等 ,而 在 实际 工作 中 要 想 在 使 
用 表格 组 织 数据 的 同时 ,尽量 让 表格 呈现 出 良好 的 视觉 效果 ,就 要 利用 CSS 对 表格 内 的 
标签 加 以 精确 控制 。 


TEA 


empt 


1 表格 类 CSS 属性 


与 表格 相关 的 CSS 属性 主要 有 border-collapse、border-spacing、caption-side 和 
y-cells, 更 为 详细 的 解释 见 表 7-1。 
表 7-1 表格 中 常用 的 CSS 属性 
性 属性 值 及 其 含义 说 明 


border-collapse 


separate( 默 认 值 ) | 边框 独立 设置 表格 的 行 和 单元 格 的 边框 是 否 
collapse 边框 合并 合并 在 一 起 


border-spacing | length 识 符 组 成 的 长 度 值 ,不 


当 设 置 表格 为 边框 独立 时 , 行 和 单元 
格 的 边 在 横向 和 纵向 上 的 间距 。 当 
指定 一 个 length 值 时 ,这 个 值 将 作用 
于 横向 和 纵向 上 的 间距 ; 当 指 定 了 两 
个 length 值 时 ,第 一 个 作用 于 横向 间 
距 , 第 二 个 作用 于 纵向 间距 


由 浮 点 数字 和 单位 标 


可 为 负 值 
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续 表 


属性 值 及 其 含义 


asa 


说 M 


top( 默 认 值 ) 


caption 在 表格 的 上 边 


设置 表格 的 caption 对 象 是 在 表格 的 


caption-side Gue — EAEN 哪 一 边 , 它 是 和 caption 对 象 一 起 使 用 
bottom caption 在 表格 的 下 边 的 属性 
left caption 在 表格 的 左边 
show( 默 认 值 ) 显示 边框 设置 表格 的 单元 格 无 内 容 时 ,是 否 显 
empty-cells 示 该 单元 格 的 边框 ( 仅 当 表 格 行 和 列 
hite 隐藏 加 权 的 边框 独立 时 此 属性 才 生 效 ) 


这 些 属 性 主要 作为 控制 表格 的 基础 属性 而 出 现 , 如 果 需 要 更 加 漂亮 的 效果 则 还 需 增 
加 背景 色 .背景 图 和 辅助 图 像 等 美化 元 素 。 为 了 更 加 容易 地 理解 有 关 表 格 的 CSS 属性 ， 
这 里 以 案例 形式 进行 讲解 。 


【演练 7-6】 


表格 类 CSS 属性 。 


O 创建 空白 XHTML 文档 ,创建 4 组 宽度 为 300 像素 ,边框 为 “0? 的 2 行 2 列表 格 ， 
此 时 “设计 ”视图 中 表格 的 外 观 如 图 7-28 所 示 。 

© 将 鼠标 定位 在 “代码 "视图 ,在 本 页 面 的 head 区 域 创建 表格 统一 的 外 观 规则 ,如 
图 7-29 所 示 。 保 存 当 前 文档 ,通过 浏览 器 预览 可 以 看 到 效果 ,如 图 7-30 所 示 。 


table ( 


} 


td { 


border: 
) /* 设 置 单元 格外 边框 */ 
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7-28 创建 4 组 表格 


font :16px "WREE"; 


text-align:center; 


border:1px #333 solid;/* 设 置 表格 外 轮廓 */ 
margin-bottom: 20pxi/* 设 置 表 格 间距 离 */ 


r: 1px solid #06F; 


7-29 CSS 规则 (3) 


7-30 ”预览 效果 (2) 


第 7 章 网 页 元 素 一 一 表格 
@ 为 了 能 够 清楚 地 诠释 与 表格 相关 的 CSS 属性 ,这 里 定义 4 个 类 ,分 别 应 用 在 4 组 
表格 上 ,具体 的 CSS 规则 如 图 7-31 所 示 。 
@ 保存 当前 页 面 文档 ,通过 浏览 器 预览 即 可 看 到 效果 ,如 图 7-32 所 示 。 


ovs Inter... Ë |P) 


SO [e rvmpGsreəvun v| < xl |P 


文件 四 wu mo baa IAY 4” 


此 处 将 表格 边框 进行 合并 


调整 单元 格 间 的 距离 - 


-al 
bod od anse :collapse; 


}/* 合 并 表格 则 距离 

‘bl m" " 
border-spacing: 调整 表格 标题 的 位 置 

ái SE n ENNE: / 

tion-side:bottom; 

SEREIA / PE OE 

-dt 此 处 表格 内 没有 任何 一 
border- tp separate; 内 容 ， 故 隐藏 表格 边框 

empty-cells:hide 
)1⁄* WK 8 Els 1259, 隐藏 边框 */ 


图 7-31 CSS 规则 (4) 图 7-32 预览 效果 (3) 


7.2.2 CSS 表格 


CSS 表格 属性 可 以 帮助 用 户 极 大 地 改善 表格 的 外 观 ,而 在 实际 工作 中 表格 的 结构 也 
十 分 重要 。 为 了 使 结构 更 加 合理 ,这 里 向 读者 介绍 thead 元 素 、 ..， 
tbody 元 素 和 tfoot 元 素 , 具 体 结 构 如 图 7-33 所 示 。 

这 里 的 thead 元 素 用 于 组 合 XHTML 表格 的 表 头 内 容 ， 
tbody 元 素 用 于 对 XHTML 表格 中 的 主体 内 容 进 行 分 组 ,而 
tfoot 元 素 用 于 对 XHTML 表格 中 的 表 注 (页 脚 ) 内 容 进行 分 组 。 
有 了 这 些 元 素 的 帮助 ,表格 的 结构 才 显得 清晰 ,为 后 续 编 写 CSS 


order="1"> 


onth</th> 
avings</th> 


d: 


Gd>January</td> 
3>S100</td> 


规则 创造 了 便利 条 件 。 
【演练 7-7】 CSS 表格 。 
© 启动 Dreamweaver CS5, 并 创建 站 点 。 在 站 点 内 创建 


“images” 文 件 夹 ,并 把 需要 的 图 像 放 置 其 中 。 

© 创建 空白 XHTML 文档 ,执行 软件 菜单 栏 中 的 “插入 ”~ 
“表格 ”命令 ,插入 9 行 3 列 的 表格 。 

O 分 别 选 择 第 二 行 和 第 六 行 单元 格 将 其 合并 .然后 输入 图 7-33 典型 的 表格 结构 
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相应 的 文字 内 容 ,此 时 表格 如 图 7-34 所 示 。 为 了 让 表格 更 具 结构 性 ,这 里 在 第 一 行 单 
元 格 前 后 增加 二 thead 二 标签 ,剩余 的 内 容 增 加 二 tbody 二 标签 ,修改 后 的 代码 如 图 7-35 
所 示 。 


RAE IF 1 人 


图 7-34 当前 表格 图 7-35 修改 后 的 结构 


@ 表格 结构 及 其 内 容 添加 完成 后 ,就 可 以 用 CSS 规则 美化 表格 外 观 了 。 将 鼠标 定位 
在 “代码 ?视图 ,在 本 页 面 的 head 区 域 创建 表格 初始 化 外 观 规则 ,如 图 7-36 所 示 。 通 过 浏 
览 器 预览 后 的 效果 如 图 7-37 所 示 。 


无 标题 文档 - Windows Internet Exp... EBR 
GO [e rvmamsceuns o x | 万， 
文件 下) RAD FEV RRRA IAV MHU 


bod: ARERR Ermm ja- 


yi 
font:16px/1.5 "微软 雅 黑 "7 
} > 分 支部 门 ” 部 门 负责 人 部 门人 员 数 量 
table ( 
border-collapse: collapse; 
margin-bottom: 3em; 
) 
tr:hover, td.start:hover, td.end:hover ( 
background: #FC0; /* MAREE AN RENE, + / 
} 
th, td { 
padding:2px; 
} 
th ( 
font-weight:normal; 
text-align:left; 
background: url(images/tabletree-arrow.gif) 
no-repeat 2px 50%; 
padding-left:20px; 


图 7-36 CSS 规 则 (5) 图 7-37 预览 效果 (4) 


@ 从 预览 效果 可 知 ,此 时 的 表格 外 观 不 能 满足 实际 需要 ,为 了 解决 这 一 问题 需要 进 
一 步 修 改 结构 代码 ,这 里 为 某 些 th 元 素 增加 不 同 的 类 规则 ,以 便 呈 现 不 同 的 效果 ,由 于 修 
改 的 代码 过 长 ,请 读者 参考 本 例 附带 的 源 文件 。 

© 代码 修改 完成 后 ,再 次 编写 对 应 的 CSS 规则 ,如 图 7-38 所 示 。 通 过 浏览 器 预览 后 
的 最 终 效果 如 图 7-39 所 示 。 

本 例 中 , 树 状 外 观 的 表格 主要 是 通过 background 属性 完成 的 ,为 了 让 相同 的 th 元 素 
呈现 不 同 的 外 观 , 特 意 增加 了 许多 类 规则 并 应 用 其 中 ; 鼠标 悬 停 效果 , 则 是 为 tr 元 素 和 部 
分 td 元 素 增加 伪 类 而 实现 的 。 通 过 本 例 的 模仿 训练 ,读者 应 该 掌握 用 CSS 美化 表格 的 
基本 方法 ,以 及 如 何 针对 某 一 单元 格 编写 相应 的 规则 。 
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th.name ( 
width:10em7 
} 


th.location { 


width: 8em; /无 标题 文档 - Windows Internet Explorer 
} 
th.color { GOGO- [A ?教材 编写 汇总 \ 痢 图 + x pP 
width:8em; HE 


} XPO SEO FEV HEAW IAW #HW 
thead th { 
background: #c6ceda; 
border-color: #fff #fff #888 #fff; 
border-style: solid; 
border-width: 1px 1px 2px 1px; 
padding-left:0; 
text-align:center; 


aa Et] 


) 
tbody td ( 
text-align:center; 
} 
tbody th.start { 
background:url (images/tabletree-dots.gif) 
18px 54% no-repeat; 
padding-left: 30px; 
} 
tbody th.end { 
background:url (images/tabletree-dots2.gif) 
18px 54% no-repeat; 
padding-left:30px; 


} 


图 7-38 CSS 规 则 (6) 图 7-39 预览 效果 (5) 


73 CSS 知识 积 累 


之 前 章节 已 经 对 CSS 的 基础 知识 进行 了 铺垫 ,本 节 主 要 向 读者 介绍 CSS 中 浮动 和 定 
位 两 大 重要 知识 。 


7.3.1 浮动 


在 CSS 中 *float” 属 性 能 够 使 应 用 该 属性 的 元 素 脱离 当前 文本 流向 左 或 向 右 漂浮 , 直 
到 它 的 外 边缘 碰 到 边框 或 另 一 个 浮动 框 为 止 。 

float 属性 有 四 个 可 用 的 值 :“left” 和 “right” 属 性 值 分 别 浮动 元 素 到 各 自 的 方向 ,“none 
(默认 的 )” 属 性 值 使 元 素 不 具有 浮动 效果 ,“inherit”* 属 性 值 将 会 从 父 级 元 素 获取 float 值 。 


1. 向 左 ( 右 ) 浮 动 


当 某 个 元 素 具 有 向 左 ( 右 ) 浮 动 的 属性 ,那么 该 元 素 便 脱 离 当 前 文档 流向 左 ( 右 ) 移 动 ， 
直到 碰 到 左 ( 右 ) 边 缘 。 

【演练 7-8】 向 左 ( 右 ) 浮 动 。 

O 启动 Dreamweaver CS5 ,创建 空白 XHTML arcontent™> 


<div id="box apple" class="box"></div> 


文档 ,将 光标 置 于 “代码 ”视图 中 ,创建 一 组 在 套 的 <div id="box windows" class="box"></div> 


<div id="box rss" class="box"></div> 


div 容器 ,并 在 其 中 插入 图 像 ,具体 结构 代码 如 ”EE 吕 、 
图 7-40 所 示 。 图 7-40 页面 结构 (1) 
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@ 将 鼠标 定位 在 “代码 ?视图 ,在 本 页 面 head 区 域 创 建 相关 CSS 规则 ,如 图 7-41 
所 示 。 
@ 保存 当前 网 页 文件 ,通过 浏览 器 即 可 看 到 预览 效果 ,如 图 7-42 所 示 。 


[S Z GS) Bab - Windows Internet Explorer DER 


) [e rainsce'i + x |/ 


xp SED FEV KRAO IRV 帮助 人 0 
aonr [sss mz. x a-p- e 


<style type="text/css"> 
body ( 
font-size:22px; 


#content ( 

width: 450px; 
border:2px #F60 dotted; 
float:left; 


width: 114px; 
height:120px; 
margin:10px; 
border:1px #ccc solid; 


x_apple 
background:url(images/apple.png) no-repeat; 


tbo ows { 
round:url (images/windows.png) no-repeat; 
} 
#box rss { 
background:url (images/rss.png) no-repeat; 
} anni 
</style> ae Rio ~ 


图 7-41 CSS 规则 (7) 图 7-42 预览 效果 (6) 


@ 为 名 为 “box_apple” 的 div 容器 增加 “float:right;” 属 性 ,这 时 “box_apple” 便 脱离 
文档 流向 右 移动 ,直到 它 的 右边 缘 碰 到 “content” 容 器 的 右边 框 为 止 ,如 图 7-43 所 示 。 

© 为 名 为 “box_windows” 的 div 容器 增加 “float:left;” 属 性 ,这 时 “box_windows” 便 
脱离 文档 流向 左 移 动 , 直 到 它 的 左边 缘 碰 到 “content” 容 器 的 左边 框 为 止 ,如 图 7-44 所 示 。 
需要 特别 注意 的 是 ,由 于 “box_windows" 不 再 处 于 文档 流 中 ,所 以 它 不 占据 空间 ,实际 上 
覆盖 了 “box_rss”, 致 使 *box_rss” 从 视图 中 消失 。 


Windows Internet Explorer DER 


e FABMHGSCSVG v + Xx |D Pp- 
REO FEV GRAW IAV 帮助 
gu aE.. x A-D Og- 


C Až ( 右 ) Fih - Windows 
GƏ [e rvwnmsrevns o x [y 

XPO SEO FEV W@REQ) IAW EHW 
keer l| Baz.. x | a:a 


局 
i 


图 7-43 box_apple 向 右 浮 动 7-44 box_windows 向 左 浮动 
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© 删除 之 前 为 “box_apple” 和 “box_windows” 增 加 的 浮动 属性 。 统 一 为 “box_ 
apple”、“box_windows” 和 “box_rss” 增 加 “float:left;” 属 性 。 

这 时 “box_apple” 向 左 浮动 直到 碰 到 左边 框 时 静止 ,另外 两 个 元 素 也 向 左 浮动 ,直到 
碰 到 前 一 个 浮动 框 也 静止 ,如 图 7-45 所 示 , 最 终 将 纵向 排列 的 div 容器 , 变 成 了 横向 
排列 。 

细心 的 读者 可 以 发 现 ,由 于 “box_apple”、“box_windows” 和 “box_rss” 均 拥有 向 左 浮 
动 的 属性 ,集体 脱离 了 文档 流 , 致 使 包含 这 3 个 容器 的 父 级 容器 “content” 内 部 没有 任何 
内 容 , 所 以 “content” 被 简化 为 一 条 线 位 于 页 面 顶部。 解决 这 种 情况 的 方法 是 将 “content” 
容器 同样 赋予 “float:left;” 属 性 ,预览 效果 如 图 7-46 所 示 。 


C PE G) 浮动 - Windows Im 

GO [elrwtmgcevns o x |/ P. OO ”四 FeHwsCem 同 /9 x | 
XD MD HEV KRW IAD HHU ZPO SAO HEV RAW IAV 
i RRR «Ønt.. x 3 


&é == 


ET a im 


图 7-45 容器 集体 向 左 浮动 图 7-46 预览 效果 (7) 


2. 清除 浮动 


清除 浮动 主要 利用 的 是 clear 属性 中 的 both( 左 右 两 侧 均 不 允许 浮动 元 素 ) left (Ze 
侧 不 允许 浮动 元 素 ) 和 right( 右 侧 不 允许 浮动 元 素 )3 个 属性 值 清除 由 浮动 产生 的 效果 。 
下 面 以 具体 示例 说 明 清 除 浮 动 的 效果 。 

【演练 7-9】 清除 浮动 。 

D 使 用 “演练 7-8” 的 页 面 内 容 继续 制作 ,在 “box_rss” 的 后 面 再 增加 一 个 块 级 元 素 “box_ 
wf”, 此 时 页 面 结构 如 图 7-47 所 示 o 

© 在 页 面 的 head 区 域 , 增 加 “box_wf” 的 CSS 规则 ,如 图 7-48 所 示 。 


<body> 
<div id="content"> 
<div id="box apple" class="box"></div> 
<div x windows" class="box"></div> #box_wf 
<div x_rss" class="box"></div> width: 430px; 


<div id="box wf"></div> height:50px7 
</div> Ë; background: #FC0; 
</body> 
图 7-47 当前 结构 (1) 7-48 对 应 的 CSS 规则 


@ 保存 当前 网 页 文件 ,通过 浏览 器 即 可 看 到 预览 效果 ,如 图 7-49 所 示 。 这 里 由 于 
box_wf 并 没有 设置 浮动 ,虽然 独占 一 行 ,但 整体 却 跑 到 了 页 面 顶部 ,并 且 被 之 前 的 元 素 所 

盖 , 出 现 了 非常 严重 的 页 面 错 位 现象 。 
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© 要 解决 这 种 问题 ,就 必须 清除 左右 浮动 才能 让 新 增 的 块 级 元 素 处 于 正确 的 位 置 。 
因此 必须 在 box_wf 的 CSS 样式 规则 中 添加 “clear: both; ”规则 。 应 用 该 规则 后 “box_ 
wf” 容 器 之 前 的 浮动 全 部 被 清除 ,通过 预览 即 可 看 到 效果 ,如 图 7-50 所 示 。 


MZ (H) Pb - Windows Internet Explorer 


[E FZ: (H) 浮动 - Vindovs Internet Explorer le OO erwan E o x [P 
S€ [e r BWHRSCSV0 v o x | - 文件 四 ”编辑 四” 查看) wm IAV 帮助 0 
ZWO RBO SEV emxa IAV EBW E A a x >| | 

ARER |B- “| ØE.. x a-e- oe: = ~ 


局 
PAEA 
一 
ET ao o ~ 
图 7-49 未 清除 浮动 时 的 效果 图 7-50 清除 浮动 后 的 效果 
7.3.2 定位 


定位 (position) 属 性 能 够 帮助 设计 者 对 页 面 中 的 各 种 元 素 定义 应 该 出 现 的 位 置 ,可 以 
选择 以 下 4 种 不 同类 型 的 定位 模式 。 

° static; position 属性 的 默认 值 ,无 特殊 定位 。 
relative; 相对 定位 ,元 素 虽然 偏 移 某 个 距离 ,但 仍然 占据 原来 的 空间 。 
absolute; 绝对 定位 ,元 素 在 文档 中 的 位 置 会 被 删除 ,定位 后 元 素 生成 一 个 块 级 元 素 。 
fixed: 固定 定位 ,元素 框 的 表现 类 似 于 将 position 设置 为 absolute ,元素 被 固定 在 
屏幕 的 某 个 位 置 , 不 随 滚动 条 滚动 。 

在 实际 工作 中 ,position 属性 中 的 “static( 静 态 定位 )”" 属 性 值 和 “fixed( 固 定 定位 )” 属 
性 值 比较 简单 ,这 里 不 再 单独 举例 讲解 。 


1. 相对 定位 与 绝对 定位 


相对 定位 指 的 是 通过 设置 水 平 或 垂直 位 置 的 值 ,让 这 个 元 素 “ 相 对 于 ” 它 原始 的 起 点 
进行 移动 。 需 要 特别 注意 的 是 ,即便 是 将 某 元 素 进行 相对 定位 ,并 赋予 新 的 位 置 值 ,元 素 
仍然 占据 原来 的 空间 位 置 ,移动 后 会 覆盖 其 他 元 素 。 

绝对 定位 与 相对 定位 有 明显 不 同 ,相对 定位 的 参照 物 是 该 元 素 原 始 位 置 ,而 绝对 定位 
的 参照 物 是 最 近 的 已 定位 祖先 元 素 , 如 果 文 档 中 没有 已 定位 的 祖先 元 素 ,那么 它 的 位 置 相 


对 于 浏览 器 的 左上 角 。 
【演练 7-10】 相对 定位 与 绝对 定位 。 
O 启动 Dreamweaver CS5, 创 建 空白 XHTML Ía ia-sconsceess ERRE]: /div> 


<div id="footer">footer</div> 


文档 ,在 页 面 中 创建 多 个 相互 嵌 套 的 div 容器 ,并 输 </bcay> 
人 对 应 的 文字 ,具体 结构 如 图 7-51 所 示 。 图 7-51 页 面 结构 (2) 
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© 将 鼠标 定位 在 “代码 ”视图 ,在 本 页 面 head 区 域 创 建 相关 CSS 规则 ,如 图 7-52 所 
示 。 保 存 当 前 文档 ,通过 浏览 器 可 以 预览 效果 ,如 图 7-53 所 示 。 


<style type="text/css"> 
body { 


font-size:26px; DLL] (SES E 
i SAD FEV HRW IAD |” 
#top { = — 
width:300px; ARER |g < ØER.. x a- 


line-height:30px; 
background: #6CF; 
padding-left:5px; 

} 

#content ( 
width:300px; 
height:200px; 
background: #FFO; 
padding-left: 5px; 
border:lpx #000 dashed; 

} 

#footer { 
width:300px; 
line-height:30px; 
background: #6CF; 
padding-left: 5px; 


:此 容器 人 置 为 相对 定位 ; 参 ; 
照 物 是 该 容器 原 有 的 位 置 : 


} 
</style> 


7-52 CSS 规则 (8) 7-53 ”未 定位 时 的 外 观 


@ 这 里 将 “content” 容 器 设置 为 相对 定位 , 则 该 容器 相对 于 原始 的 起 点 进行 定位 , 即 
相对 于 图 7-53 中 “box” 容 器 初始 位 置 进行 定位 。 修 改 间 content 规则 ,如 图 7-54 所 示 , 通 
过 浏览 器 解析 后 的 效果 如 图 7-55 所 示 。 


#content 1 
width:300px; 
height:200px; 
background: #FFO; 
padding-left: Spx; 
border:lpx #000 dashed; 
position:relative;/* 设 置 相对 定位 */ 
top:100px; /* 距 离 硕 部 100 像 泰 */ 
left :100px; /* 距 离 左 侧 100 像 素 */ 


图 7-54 修改 后 的 CSS 规则 7-55 content 容器 相对 定位 后 的 效果 


从 图 7-55 中 可 以 看 出 ,“content” 容 器 向 下 和 向 右 “ 相 对 于 ”初始 位 置 各 移动 了 100 像 
素 的 距离 ,原来 的 位 置 不 但 没有 让 “footer” 容 器 占据 ,反而 还 将 其 谈 羔 了 一 部 分 。 

@ 将 top 容器 设置 为 绝对 定位 , 则 该 容器 进行 定位 的 参考 对 象 是 浏览 器 的 左上 角 ， 
新 增 的 CSS 规则 如 图 7-56 所 示 。 通 过 浏览 器 解析 后 的 效果 ,如 图 7-57 所 示 。 
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GO [e rvmnmureuns o x | 
xO mü SEV PRAW IAV 


left:200px; 


| 照 物 是 该 容器 原 有 的 位 置 : 


#topi 
position:absolute;/* 设 置 绝对 定位 */ 
top: 50px; / *PS EMRS RE / 
left:200px;/* 距 离 左 侧 200 像 素 */ 

} 


7-56 设置 top 容器 绝对 定位 图 7-57 top 容器 绝对 定位 后 的 效果 


仔细 观察 设置 绝对 定位 前 后 的 效果 可 以 发 现 , 当 top 容器 移动 位 置 后 ,其 他 元 素 位 置 
也 发 生 了 相应 的 变化 。 由 此 ,可 以 清楚 地 理解 使 用 绝对 定位 元 素 的 位 置 与 文档 流 无 关 , 且 
不 占据 空间 ,文档 中 的 其 他 元 素 布局 就 像 绝 对 定位 的 元 素 不 存在 一 样 。 


2. 相对 定位 与 绝对 定位 的 混合 使 用 


单纯 的 相对 定位 和 绝对 定位 的 参照 物 都 是 孤立 的 ,要 想 让 某 一 容器 相对 于 另 一 容器 
进行 定位 ,又 该 如 何 处 理 呢 ? 

读者 在 浏览 电子 商务 类 网 站 时 ,一 定 熟悉 类 似 图 7-58 所 示 的 布局 ,这 里 与 商品 相关 
的 信息 是 用 无 序列 表 完 成 的 ,而 右上 角 的 “打折 信息 ” 则 是 通过 相对 定位 与 绝对 定位 的 知 
识 完成 的 。 

【演练 7-11】 相对 定位 与 绝对 定位 的 混合 使 用 。 

(Q) 启动 Dreamweaver CS5 ,并 创建 站 点 。 在 站 点 内 创建 “images” 文 件 夹 ,并 把 需要 
的 图 像 放 置 其 中 。 

© 创建 空白 XHTML 文档 ,在 页 面 中 插入 如 图 7-59 所 示 的 结构 代码 。 


<body> 
<div id="box"> 
<ul> 


— <li><img src="images/pro 01.jpg" width="170" height="170" /> 
<h3><a href=-"#"> 合 体 直 向 牛 仔裤 M173</a></h3> 
<div class="newview"></div> 


</li> 
</ul> 
</div> 
Adidas 阿迪 达 斯 男子 限量 版 </body> 
7-58 页 面 中 某 区 域 布局 7-59 结构 代码 


@ 将 鼠标 定位 到 “代码 ?视图 中 ,在 页 面 顶 部 head 区 域 编写 与 结构 相对 应 的 CSS 规 
则 ,如 图 7-60 所 示 。 保 存 当前 网 页 文件 ,通过 浏览 器 预览 可 看 到 效果 ,如 图 7-61 所 示 。 

© 从 预览 图 中 可 以 看 出 ,此 时 左下 角 的 “新 品 图 像 " 并 未 出 现在 合理 的 位 置 , 为 了 解 
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margin:0; 
padding: 0 

t 

#box { 
border:1px #999 solid; 
width:170px; 
height:200px; 
margin:50px 0 0 50px; 


list-style:none; 


ul li { 
width:170px; 


ARAR | < ØE.. x 


al li h3 { 
width:100%; 
text-align:center; 
padding:4px 0 0 0; 
margin-top: Spx; 


lli h3al 
font-weight:normal; 
color: #666; 
text-decoration:none; 
font-size:12px; 
) 
.newview { 
background: url (images/icon-new.gif) 
no-repeat left top; 
height:23px; 
width:33px; 
) 


Stim +H 


图 7-60 CSS 规则 (9) 图 7-61 预览 效果 (8) 


决 这 个 问题 ,这 里 使 用 相对 与 绝对 定位 进行 解决 。 仔 细 观 察 当 前 文档 结构 “新 品 图 像 ” 所 
在 的 容器 的 父 一 级 元 素 为 1 元素, 所 以 在 CSS 规则 中 分 别 对 ii 元素 以 及 “新 品 图 像 " 所 在 
的 容器 分 别 增加 相对 定位 和 绝对 定位 ,具体 的 规则 如 图 7-62 所 示 。 

© 保存 文档 后 ,通过 浏览 器 预览 可 以 看 到 最 终 效果 ,如 图 7-63 所 示 。 


无 标题 文 焰 - windows ... [Z |P K 
[e renec v tr 
RED HV BRAW ” 
Er < BIR.. x 


ul li { 
width:170px; 
position:relative;/* 设 置 相 对 定位 */ 
1 
-newview ( 
background: url(images/icon-new.gif) 
no-repeat left top; 
height:23px; 


width:33px; S#E8@ HIM 
position:absolute;/* 设 置 绝对 定位 */ 
top:07 
left:0; 
} 
图 7-62 修改 部 分 规则 图 7-63 ”最终 效果 (2) 


通过 本 例 的 练习 可 知 ,要 想 实 现 某 一 容器 相对 于 另 一 容器 进行 定位 , 则 必须 通过 相对 
定位 和 绝对 定位 的 同时 应 用 来 解决 。 具 体 地 说 ,如 果 有 三 个 x、y 和 z 容器 ,他 们 之 间 的 关 
系 是 x 容器 包含 y 容器 ,y 容器 包含 z 容器 ,那么 若 要 z 容器 相对 于 y 容器 进行 定位 , 则 y 
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容器 设置 为 相对 定位 ,z 容器 设置 为 绝对 定位 ; 若 要 z 容器 相对 于 x 容器 进行 定位 , 则 x 
容器 设置 为 相对 定位 ,z 容器 设置 为 绝对 定位 。 


74 商用 案例 一 一 “中 秋 节 电影 ” 
活动 页 面 的 设计 与 实现 


目前 ,许多 大 型 网 站 都 定期 策划 某 些 专题 活动 ,为 了 配合 活动 的 宣传 通常 会 制作 界面 
效果 较为 华丽 的 网 站 加 以 配合 。 本 节 就 以 活动 页 面 为 例 ,使 用 本 章 所 介绍 的 CSS 浮动 和 
定位 知识 向 读者 讲述 该 类 页 面 的 设计 与 实现 。 


7.4.1 页 面 规 划 


图 7-64 所 示 的 是 该 页 面 的 最 终 效果 ,从 页 面 整个 布局 来 看 ,页 面 中 虽然 包含 大 量 美 
化 的 图 像 和 图 文 信息 等 内 容 , 但 结构 较为 单一 。 总 的 来 说 ,可 以 将 整个 页 面 划 分 为 头 部 区 
域 和 主体 区 域 ,而 主体 区 域 又 可 以 划分 为 四 个 横向 的 图 文 信息 区 域 。 

通过 上 述 对 页 面 简单 的 分 析 , 结 合 之 前 所 学 习 的 知识 ,可 以 将 页 面 作 如 下 规划 ; 首先 ， 
使 用 wrapper 容器 将 页 面 所 有 元 素 进 行 包 庄 ,方便 对 整体 内 容 加 以 控制 ; 其 次 ,将 整个 页 面 
自 上 到 下 划分 为 5 个 区 域 ,第 1 个 区 域 用 于 放置 flash 动画 ,后 面 4 个 区 域 分 别 放 管 图 文 信 
息 列表 ; 再 次 ,在 实现 图 文 信息 列表 时 拟 使 用 相对 定位 和 绝对 定位 的 知识 ,使 其 精确 地 出 现 
在 某 个 区 域内 部 ; 最 后 ,通过 深思 熟 虑 的 设计 ,可 以 画 出 页 面 布局 示意 图 ,如 图 7-65 所 示 。 


273 
anan 


wrapper 
bg_act_1 
flash 
bg act 2 
bg act 3 
k ii = bg act 4 
" m= 
b: i mp 2 bg act 5 
YE esa L A >l 
7-64 “中 秋 节 电影 ”活动 页 面 最 终 效 果 图 图 7-65 示意 图 (1) 
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7.4.2 页 面 的 具体 实现 


1. 页 面 制作 前 的 准备 工作 


© 启动 Dreamweaver CS5 创建 站 点 ,并 在 站 点 内 分 别 创建 用 于 放置 图 像 的 “images” 文 
件 夹 和 放置 CSS 文件 的 “style” 文 件 夹 , 并 将 所 需 图 像素 材 拷贝 到 站 点 的 “images” 文 件 夹 内 。 

© 分 别 创 建 空白 XHTML 文档 和 CSS 文档 ,将 网 页 文档 保存 在 根 目录 下 ,并 重 命名 
为 “index. html” ,将 CSS 文档 保存 在 style 文件 夹 下 ,并重 命名 为 div. css”, 

@ 将 创建 完成 的 网 页 文档 和 CSS 文档 链接 起 来 。 


2. 搭建 页 面 结构 


Q) 待 准备 工作 结束 后 ,切换 到 “index. html" 文 档 中 ,在 “插入 ”面板 的 “常用 ”选项 卡 
中 单 击 * 插 入 Div 标签 ”按钮 ,弹出 “插入 Div 标签 ”对 话 框 ,在 “插入 ”下拉 菜单 中 选择 “在 
插入 点 ”选项 ,在 “ID” 下 拉 列 表 框 中 输入 wrapper, 最 后 单 击 “ 确 定 ” 按 钮 , 即 可 在 页 面 中 插 
入 wrapper 容器 。 

© 切换 到 “div. css” 文 档 ,为 整个 页 面 进行 初始 化 定义 ,如 图 7-66 所 示 。 

© 切换 回 “index. html” 文 档 中 ,删除 wrapper 容器 内 多 余 文 字 ,在 “插入 ”面板 的 “ 常 
用 ”选项 卡 中 单 击 “ 插 入 Div 标签 ”按钮 ,按照 如 图 7-67 所 示 的 参数 设置 在 wrapper 容器 
内 部 插入 bg_act_1 容器 。 


margin:0; 


padding: 0; 
list-style:none; 
border:0; 

) 

body ( = rr = 
background: 8003446; MA: [ERMEZ M [<div idewrapper'> M 
color: #FFF; = ` 

} ID: [beset ` 

#wrapper ( i 
width:1398px; 


margin:0 auto; 
Color:#FFF; 


图 7-66 初始 化 规则 图 7-67 插入 bg_act_l 容器 


@ 将 鼠标 定位 在 “设计 ?视图 中 ,在 “插入 ?面板 的 “常用 ?选项 卡 中 单 击 * 搬 入 Div 标 
ZE FREH ,按照 如 图 7-68 所 示 的 参数 设置 在 bg_act_1 容器 后 面 插入 bg_act_2 容器 。 
@ 参照 步骤 图 的 方法 依次 创建 并 列 关系 的 多 个 容器 ,具体 的 页 面 结构 如 图 7-69 所 示 。 


插入 Div 标签 


<body> 

<div id="wrapper"> 
<div id="bg_act_1"></div> 
<div id="bg_act_2"></div> 
<div id="bg_act_3"></div> 
<div id="bg_act_4"></div> 
<div id="bg_act_5"></div> 

</div> 

</body> 


图 7-68 插入 bg_act_2 容器 图 7-69 页 面 结构 (3) 
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© 切换 到 “div. css” 文 档 , 分 别 为 bg_act_1 容器 至 bg_act 5 容器 编写 相应 的 CSS 规 
则 ,具体 内 容 如 图 7-70 所 示 。 
D 保存 当前 网 页 文档 ,通过 浏览 器 预览 可 以 看 到 效果 如 图 7-71 所 示 。 


“background 
height : 402) 


background: url( 2 ) at center t 
height: 550px; 

background: url(../images2/bg_03.jpg) no-repeat center top 
height:340px; 

background: url(../images2/bg_04.jpg) no-repeat center top 
height:340 

akat 

background: url(../images2/bg_05.jpg) no-repeat center top 


height:450px 


图 7-71 预览 效果 (9) 


3. 细 化 页 面 


O 切换 回 “index. html" 文 档 中 ,将 鼠标 定位 在 “设计 ”视图 中 ,在 “插入 "面板 的 “ 常 
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用 ”选项 卡 中 单 击 “ 插 入 Div 标签 ?按钮 ,按照 
如 图 7-72 所 示 的 参数 设置 在 bg_act_1 容器 


BA: | 在 开始 标签 之 后 M [<div id=°be_act_1" v 


内 部 插入 flash 容器 。 a š 
© 删除 flash 容器 内 多 余 文 字 , 在 该 容 | "SS 


器 内 部 插入 预先 准备 好 的 flash 视频 宣传 片 ， 
并 将 该 视频 的 宽度 设置 为 290 像素 ,高 度 设 


置 为 215 像素 ,其 他 参数 如 图 7-73 所 示 。 图 7-72 创建 flash 容器 
属性 
S, Po0 XED [ssiv 示 命名 -2 sf G O reo r] #@ = 同 
Hna 2 天 wma | 
AARU EnEV RAQ | 高 品质 > FQ) mu ve mm J 
回 自动 播放 水 平 边 距 V HPG) m, (全 部 显示 ) v| Wo) | 不 适 明 v sa. ] 


图 7-73 flash 参数 设置 


© 保存 当前 文档 ,通过 预览 可 以 发 现 ,虽然 flash 视频 可 以 正常 播放 ,但 位 置 并 未 出 
现在 页 面 的 右上 角 的 固定 区 域 。 为 了 让 flash 视频 精确 定位 ,这 里 采用 相对 定位 和 绝对 
定位 混合 使 用 的 方式 处 理 。 仔 细 观 察 当 前 结构 可 知 ,flash 容器 的 父 一 级 容器 为 bg_act_1， 
要 想 进行 定位 , 则 flash 所 在 容器 应 该 设置 为 绝对 定位 ,容器 bg_act_1 应 该 设置 为 相对 定 
位 ,具体 新 增 和 修改 的 CSS 规则 如 图 7-74 所 示 。 

© 通过 预览 可 以 看 到 效果 ,如 图 7-75 所 示 。 


ip pka 


#bg_act 1 
background: 
url(../images2/bq_01.jpg) no-repeat 
center top; 
height:402px; 
position:relative;/* 相 对 定位 */ 


#flash { 
position:absolute;/* 绝 对 定位 */ 
top:151px; 
left:862px; 


图 7-74 CSS 规则 (11) 图 7-75 预览 效果 (10) 


将 鼠标 定位 在 “代码 ”视图 中 ,在 bg_act_2 容器 内 部 使 用 无 序列 表 作 为 骨架 ,创建 
一 组 图 文 信息 列表 ,具体 的 结构 如 图 7-76 所 示 。 

© 切换 到 “div. css” 文 档 , 编 写 相 应 的 CSS 规则 ,具体 内 容 如 图 7-77 所 示 ,预览 效果 
如 图 7-78 所 示 。 

@ 从 预览 效果 可 以 看 出 ,图 文 信息 列表 并 未 显示 在 背景 图 像 的 中 央 位 置 ,为 了 解决 
这 个 问题 ,同样 需要 使 用 相对 定位 和 绝对 定位 混合 使 用 的 方式 来 处 理 。 切 换 到 “div. css” 
文档 中 ,创建 名 为 “# abc” 的 新 规则 ,修改 bg_act_2 容器 的 部 分 规则 ,具体 内 容 如 图 7-79 
所 示 。 通 过 预览 后 的 效果 如 图 7-80 所 示 。 
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<ul id="abc" Cli tyle"> 
"images2/ 


height="204" 


height="204" 


height="204" 


h3 元 素 放置 


电影 名 称 f 


OX 


height="204" 


height="204" 


<P> 大 : 演 芋 唐 戏 </P> 
</1i> 
</ul> 
</div> 


7-76 ”当前 结构 (2) 


margin:0px 20px 15px Opx; 
width:150px; 


overflow:hidden; 
text-align:center; 
padding: 4px 0 0 0; 
white- space-nowrap; / 


MLR, AANA 
text-overflow: ellipsis;/*css3.0 规 则 ， 当 对 象 内 
文本 溢出 时 显示 省 略 标 记 《 ) */ 


margin-top: Spx; 
tyle 
font-weight:normal; 
color: #F00; 
text-decoration:none; 
font-size:14px; 


ul-style 
width:100%; 
text-align:center; 
color: #666; 
margin-top: 5px; 
font-size:13px; 


图 7-77 CSS 规则 (12) 


图 7-78 预览 效果 (11) 


/></a> 


/></a> 


/></a> 


/></a> 


tabc { 
position:absolute;/* 绝 对 定位 */ 
top: 150px; 

left:290px; 

width: 873px; 


#bg act 2 1 
background: url(../images2/bg_02.jpg) 


position:relative;/" 相 对 定位 */ 
7-79 CSS 规则 (13) 图 7-80 预览 效果 (12) 


按照 类 似 的 制作 方法 在 bg_act_3 容器 至 bg_act_5 容器 内 部 使 用 无 序列 表 作为 骨 
架 创 建 一 组 图 文 信息 列表 ,具体 结构 如 图 7-81 所 示 。 


c" class="ul-style"> 

FE #abcd ( 
position:absolute; 
top:75px; 
left:290px; 
width: 873px; 


act_3"> 
cd" class="ul-style"> 


position:absolute; 
top:75px 
left:290px 
width: 873px; 
</div> #abcdef 
<div id="bg_act_5"> position:absolute; 
<ul id="abcdef" class="ul-style"> top: 75p 
(<li><a... left:290px; 
</ul> width: 873px; 
</div> 
图 7-81 页 面 结构 (4) 图 7-82 CSS 规则 (14) 


@ 保存 网 页 文档 ,通过 浏览 器 预览 可 以 看 到 最 终 效果 。 
75 实 训 


1. 实 训 要 求 

使 用 本 章 所 学 习 的 浮动 和 定位 的 相关 知识 ,仔细 分 析 页 面 布局 ,采用 “DIV 十 CSS” 的 
模式 制作 * 中 秋月 饼 促 销 活动 "专题 网 站 。 制 作 过 程 中 ,着 重 使 用 无 序列 表 作 为 网 页 骨架 
实现 局 部 的 布局 。 

2. 过 程 指导 


D 首先 ,打开 源 文件 ,观察 该 网 页 通过 浏览 器 预览 后 的 效果 。 然 后 ,根据 自己 的 理解 
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尝试 规划 页 面 布 局 。 最 后 ,查看 源 文件 的 页 面 结 构 布 局 ,与 自己 的 布局 思路 加 以 对 比 ,学 
习 其 中 的 布局 思想 。 

© 启动 Dreamweaver CS5, 并 创建 站 点 。 在 站 点 内 创建 “images” 文 件 夹 和 “style” 文 
件 夹 。 分 别 创建 空白 网 页 文档 和 外 部 CSS 文档 ,然后 将 两 者 链接 起 来 。 

@ 根据 需要 设计 规划 页 面 整个 布局 ,示意 图 如 图 7-83 所 示 。 

© 参照 布局 示意 图 ,依次 创建 wrapper 容器 、header 容器 content 容器 和 footer 容器 。 

O 根据 示意 图 中 各 容器 之 间 的 关系 ,参照 源 文件 中 的 结构 细 化 各 容器 内 部 的 结构 。 
在 此 过 程 中 ,根据 需要 创建 对 应 的 CSS 规则 。 

需要 特别 提醒 的 是 ,dinggou 容器 相对 于 header 容器 进行 定位 ,header 容器 要 设置 为 
相对 定位 ,dinggou 容器 要 设置 为 绝对 定位 。 另 外 ,在 content_main 容器 中 各 个 产品 信息 
可 以 看 做 图 文 信息 列表 ,利用 浮动 的 属性 使 其 横向 排列 。 

@ 制作 过 程 中 , 边 制作 边 保 存 边 预览 ,最 终 效果 可 参照 图 7-84。 


eraeantnan_ mse n 
qaare: ie mamn 
K 


wrapper 


header 


dinggou 


content 
content_hd 


content_main 


footer 


图 7-83 示意 图 (2) 图 7-84 最 终 效果 (3) 
76 7J 题 


1. 什么 是 表格 ?什么 是 单元 格 ? 
2. 在 某 一 表格 内 部 如 何 选择 多 个 不 连续 的 单元 格 ? 
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3. 在 表格 内 搬入 一 行 或 一 列 时 ,插入 的 行 或 列 位 于 当前 行 或 列 的 什么 地 方 ? 
4. CSS 中 border-collapse 属性 主要 解决 什么 问题 ? 

5. CSS 中 “float" 属 性 包含 哪些 属性 值 , 能 够 起 到 什么 作用 ? 

6. 如 何 清除 浮动 ? 
7 
8 


. 定位 有 哪 几 种 类 型 ? 简 述 这 几 种 类 型 的 相同 与 不 同 之 处 。 
. x 容 器 是 y 容 器 的 父 一 级 容器 ,假如 y 容器 需要 相对 于 x 容器 进行 定位 ,那么 在 
CSS 中 如 何 对 x 容器 和 y 容器 进行 设置 ? 
9. 创建 8 行 5 列 ,宽度 为 500 像素 ,边框 为 1, 包含 表 标 题 和 摘要 的 表格 。 
10. 利用 CSS 控制 表格 外 观 的 知识 ,完成 图 7-85 所 示 的 隔行 换 色 CSS 表格 。 


* 4 <<< 
< 本 
sjaja ja 
ssassn 


7-85 习题 10 对 应 图 


11. 使 用 无 序列 表 、 浮 动 和 定位 的 相关 知识 制作 如 图 7-86 所 示 的 页 面 。 
12. 使 用 相对 定位 与 绝对 定位 混合 使 用 的 相关 知识 ,实现 图 7-87 所 示 的 “ 宇 泽 通 讯 
手机 专卖 网 ”活动 页 面 。 
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7-86 习题 11 对 应 图 
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7-87 习题 12 对 应 图 
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口 掌握 各 种 表单 对 象 的 创建 及 使 用 方法 。 
口 能 够 借助 CSS 对 表单 进行 美化 。 

口 理解 框架 与 框架 集 的 相关 概念 。 

口 能 够 灵活 运用 框架 知识 创建 包含 框架 的 页 面 。 


表单 是 网 站 管理 者 与 访问 者 之 间 进 行 信息 交流 的 桥梁 ,利用 表单 可 以 收集 用 户 意 见 ， 
做 出 科学 决策 ; 框架 能 够 帮助 设计 师 将 浏览 器 页 面 划分 为 多 个 独立 的 区 域 , 每 个 区 域 可 
以 显示 不 同 的 网 页 文件 。 本 章 主要 从 表单 与 框架 入 手 , 再 配合 CSS 的 使 用 ,向 读者 介绍 


81 表 单 


表单 主要 负责 数据 采集 的 功能 , 它 可 以 收集 用 户 的 信息 并 将 其 存储 在 服务 器 中 ,可 以 
说 它 是 浏览 者 与 网 站 管理 者 进行 沟通 的 桥梁 。 

表单 中 包含 文本 字段 、 密 码 字 段 、 单 选 按钮 . 复 选 框 弹出 菜单 、 可 单 击 的 按钮 和 其 他 
表单 对 象 。 当 访问 者 在 浏览 器 中 的 表单 内 输入 信息 并 单 击 “ 提 交 ” 按 钮 时 ,这 些 信息 会 被 发 
送 到 服务 器 ,服务 器 中 的 服务 器 端 脚本 或 应 用 程序 会 对 这 些 信息 进行 处 理 ,以 此 进行 响应 。 

表单 的 应 用 在 实际 生活 中 也 经 常 遇 到 ,例如 登录 邮箱 时 需要 输入 用 户 名 和 密码 ,网 站 
提供 给 访问 者 的 留言 板 , 页 面 宣传 时 发 起 的 问卷 调查 ,电子 银行 交易 ,这 些 都 是 利用 表单 
集合 数据 库 技术 来 实现 的 具体 应 用 ,如 图 8-1 所 示 。 


淘宝 网 注册 
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同意 以 下 协议 并 注册 
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图 8-1 表单 应 用 
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在 Dreamweaver CS5 中 设计 者 可 以 采用 可 视 化 的 方法 创建 表单 对 象 ,但 如 果 和 希望 完 
成 表单 的 功能 ,还 必须 编写 服务 器 端的 脚本 程序 。 


8.1.1 表单 域 


表单 域 定义 了 一 个 表单 的 开始 和 结束 。 在 包含 表单 的 页 面 中 ,每 个 表单 都 包括 表单 
域 和 若干 个 表单 对 象 ,所 有 表单 对 象 都 要 放 在 表单 域 中 才 会 生效 。 

【演练 8-1】 创建 表单 域 。 

O 启动 Dreamweaver CS5 ,新 建 空白 XHTML 文档 ,将 光标 定位 在 “设计 ”视图 中 。 

© 在 “插入 ”面板 中 选择 “表单 "类别 ,然后 单 击 其 中 的 “表单 ”按钮 。 此 时 ,在 页 面 的 
设计 视图 中 会 出 现 红色 虚线 矩形 ,这 就 是 表单 的 轮廓 指示 线 , 如 图 8-2 所 示 。 


入 mine Oma)» wie 


el 


</htal> 


[body> Eora#Eorni [A] Q ioo v380 x i157v 1 K / 1 Ë Vnicode (TF-6) 
属性 
到 表单 ID 动作 | 已 Bo v 类 加 | 无 ~] 
A leom |] REOT + @zu ` 
图 8-2 ”创建 表单 域 


© 从 图 8-2 中 的 “代码 "视图 中 可 以 看 出 ,表单 域 是 通过 二 form 二 标签 和 二 /form 二 
标签 来 实现 的 ,其 他 表单 对 象 将 包含 在 二 form 二 与 二 /form 二 之 间 , 可 以 是 一 个 对 象 ,也 
可 以 是 多 个 对 象 。 

@ 选择 该 表单 域 , 在 “属性 ?面板 中 设置 必要 的 属性 。 在 “表单 ID" 文 本 框 中 ,输入 标 
识 该 表单 的 唯一 名 称 。 当 命名 表单 后 ,就 可 以 使 用 脚本 语言 引用 或 控制 该 表单 。 

© 在 “动作 ”文本 框 中 ,输入 路 径 或 者 单 击 文件 夹 图 标 指定 处 理 表单 数据 的 页 面 或 脚本 。 

© 在 “方法 "下拉 菜 单 中 指定 表单 数据 传输 到 服务 器 的 方法 ,具体 选项 如 下 所 示 。 

。“GET” 方 法 指 的 是 将 表单 值 添 加 给 URL ,并 向 服务 器 发 送 GET 请 求 ,由 于 URL 

有 长 度 限 制 ,所 以 不 要 使 用 GET 方法 发 送 长 表单 。 
。“POST” 方 法 指 的 是 将 表单 数据 嵌入 到 HTTP 请 求 中 ;“ 上 默认 值 ” 指 的 是 使 用 浏 
览 器 的 默认 设置 将 表单 数据 发 送 到 服务 器 。 

D 在 “编码 类 型 "下 拉 菜 单 中 选择 提交 给 服务 器 进行 数据 处 理 时 所 使 用 的 编码 类 型 。 
“application/x-www-form-urlencode” 选 项 通常 与 POST 方法 一 起 使 用 ,“maultipart/form- 
data” 选 项 在 创建 文件 上 传 域 时 使 用 。 

在 “目标 ?下拉 菜单 中 选择 一 个 选项 用 来 显示 返回 的 数据 ,具体 选项 如 下 所 示 。 

。“_blank” 指 的 是 在 新 窗口 中 打开 目标 文档 。 
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。“_parent” 指 的 是 在 显示 当前 文档 的 窗口 的 父 窗口 中 打开 目标 文档 。 
。“_self” 指 的 是 在 当前 窗口 打开 目标 文档 。 

。“_top” 指 的 是 在 当前 窗口 的 窗 体内 打开 目标 文档 。 

当 所 有 设置 完成 后 , 即 可 完成 表单 域 的 创建 。 


8.1.2 文本 字段 


表单 域 创建 完成 后 ,就 可 以 为 表单 添加 表单 对 象 了 。 表 单 对 象 主要 有 文本 字段 . 单 选 
按钮 . 复 选 框 和 弹出 菜单 等 ,要 插入 这 些 表 单 对 象 基 本 操作 方法 都 是 相同 的 , 即 在 “插入 ” 
面板 的 “表单 "类别 中 选择 要 插入 的 表单 对 象 , 或 者 在 软件 菜单 栏 中 执行 “插入 ”一 “表单 ” 
命令 ,选择 二 级 菜单 中 的 某 个 表单 对 象 即 可 。 

“文本 字段 "表单 对 象 是 最 为 常见 的 表单 对 象 之 一 , 常 应 用 于 注册 、 登 录 框 和 密码 输入 
框 等 方面 。 

【演练 8-2】 插入 文本 字段 。 

O 启动 Dreamweaver CS5 ,新 建 空白 XHTML 文档 ,并 创建 表单 域 。 

© 在 “插入 ”面板 的 “表单 "类别 中 单 击 “ 文 本 字段 "按钮 四 , 即 可 插入 文本 字段 表单 
对 象 ,如 图 8-3 所 示 。 


E rAWARMWGPA EQ BAX ESE hal OTL) -0x 


(body) Formëforml)Kinputëtextfi eld) [RIQ ioo — — 762 x 70v 1 K / 1 WW Unicode (TFT-6) 
属性 
mi x+ aY |] mu 加 音 行 6) OsGe Omo RO ~x] 
[textfield | 最 多 字符 数 | DWED | ] 
Daw 


Darw 
8-3 插入 单行 文本 字段 


其 属性 面板 中 的 各 参数 及 功能 的 含义 如 下 。 
文本 域 : 该 文本 框 用 于 为 文本 字段 表单 对 象 设置 名 字 , 对 应 代码 视图 中 name 属 
性 。 命 名 时 名 字 尽 量 使 用 英文 , 且 与 要 收集 信息 的 内 容 一 致 
。 字符 宽度 : 用 于 设置 文本 域 中 最 多 可 显示 的 字符 数 , 对 应 代码 视图 中 size 属性 。 
最 多 字符 数 : 用 于 设置 文本 域 在 单行 文本 域 中 最 多 可 输入 的 字符 数 ,对 应 代码 视 
图 中 maxlength 属性 。 

。 初始 值 : 用 于 设置 在 首次 加 载 表 单 时 域 中 显示 的 值 .对 应 代码 视图 中 value 属性 。 

。 类 型 : 用 于 设置 当前 对 象 应 用 何 种 CSS 规则 。 

。 禁用 : 用 于 设置 当前 文本 域 是 否 被 禁用 。 

。 只 读 : 用 于 设置 当前 文本 域 只 能 读 取 , 不 能 修改 。 

© 文本 域 中 除了 能 够 输入 单行 的 文本 ,还 能 够 插入 多 行文 本 域 来 实现 文本 内 容 的 滚 
动 效 果 。 在 文本 字段 “属性 ?面板 中 , 单 击 * 多 行 * 单 选 按钮 ,此 时 文本 字段 和 属性 面板 均 发 
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生变 化 ,如 图 8-4 所 示 。 
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图 8-4 插入 多 行文 本 字段 
与 图 8-3 不 同 的 是 “字符 宽度 ”设置 对 应 代码 视图 中 cols 属性 ， 行 数 ?设置 对 应 代码 


视图 中 rows 属性 。 
@ 在 文本 字段 “属性 ?面板 中 , 单 击 * 密 码 ” 单 选 按钮 ,此 时 文本 字段 的 内 容 都 将 以 


“ * ”号 的 形式 显示 ,如 图 8-5 所 示 。 
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8-5 插入 密码 类 型 文本 字段 


8.1.3 复 选 框 与 复 选 框 组 
复 选 框 提供 了 一 个 实现 多 个 选项 同时 选择 的 方法 , 当 网 页 设计 者 希望 用 户 可 以 选择 


一 个 或 多 个 选项 时 ,就 应 使 用 复 选 框 。 


【演练 8-3】 复 选 框 与 复 选 框 组 。 
© 启动 Dreamweaver CS5 ,新 建 空白 XHTML 文档 ,并 创建 表单 域 。 


© 在 “插入 ”面板 的 “表单 类别 中 单 击 “ 复 选 框 " 按 钮 , 即 可 插入 一 个 复 选 框 ,如 图 8-6 
所 示 。 其 属性 面板 中 的 各 参数 及 功能 的 含义 如 下 。 
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图 8-6 插入 单个 复 选 框 
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° 复 选 框 名 称 : 用 于 设置 复 选 框 的 名 称 , 对 应 代码 视图 中 name 属性 。 需 要 特别 注 
意 的 是 ,同一 组 的 复 选 框 应 该 使 用 的 名 称 相同 。 
° 选 定 值 : 用 于 设置 复 选 框 被 选中 时 发 送 给 服务 器 的 值 , 对 应 代码 中 的 value 属性 。 
。 初始 状态 : 用 于 设置 在 浏览 器 中 加 载 表 单 时 ,该 复 选 框 是 否 处 于 选中 状态 ,对 应 
代码 视图 中 checked 属性 。 
@ 在 实际 工作 中 ,往往 需要 收集 某 一 设 问 的 复 选 框 内 容 , 这 时 就 要 使 用 复 选 框 组 来 
区 别 不 同 设 问 间 的 答案 。 在 “插入 ”面板 的 
“表单 "类别 中 单 击 “ 复 选 框 组 ”按钮 ,打开 “ 复 
选 框 组 ”对 话 框 ,如 图 8-7 所 示 。 
@ 在 “名 称 ” 文 本 框 中 ,输入 复 选 框 组 的 


名 称 : CheckboxGroupl 


晚秋 
名 称 。 PEER ANRE 


@ 单 击 加 号 “十 ”按钮 向 该 组 添加 一 个 |、 aaar] 
复 选 框 , 单 击 向 上 或 向 下 箭头 对 这 些 复 选 杠 
重新 进行 排序 。 

@ 在 “标签 "和 * 值 " 列 内 ,为 新 复 选 框 输 图 87 “ 复 选 框 组 "对 话 框 
入 标签 和 选 定 值 。 

OD 根据 需要 选择 使 用 "换行 符 " 或 "表格 "来 设置 之 前 创建 的 复 选 框 的 布局 。 设 置 完 
成 后 , 单 击 “确定 "按钮 , 即 可 插入 一 组 复 选 框 。 

最 后 需要 说 明 的 是 ,由 于 插入 单 选 按钮 和 单 选 按钮 组 的 方法 与 插入 复 选 框 相同 ,这 里 
不 再 熬 述 , 请 读者 自行 练习 。 


8.1.4 菜单 与 跳 转 菜单 


表单 中 的 菜单 对 象 能 够 显示 多 个 选项 ,以 便 用 户 通过 滚动 条 在 多 个 选项 中 进行 选择 , 
而 跳 转 菜单 属于 下 拉 菜 单 的 一 种 。 不 同 的 是 ,当选 择 菜单 中 的 某 个 选项 时 ,可 以 跳 转 到 其 
他 链接 页 面 上 ,从 而 实现 导航 的 目的 。 

【演练 8-4】 菜单 与 跳 转 菜单 。 

O 启动 Dreamweaver, J EZ A XHTML 文档 ,并 创建 表单 域 。 将 鼠标 指针 定位 在 
表单 域内 ,在 “插入 ”面板 的 “表单 ”类别 中 单 击 “ 选 择 ( 列 表 / 菜 单 )” 按 钮 ,插入 一 个 菜单 
选项 。 

© 选中 刚 创 建 的 菜单 选项 ,在 其 “属性 ”面板 内 的 “选择 ”文本 框 中 为 该 菜单 指定 一 个 
名 称 。 

O 根据 需要 为 该 菜单 选项 指定 类 型 ,包含 “菜单 "和 “列表 ”两 种 。 如 果 和 希望 表单 在 浏 
览 器 中 显示 时 仅 有 一 个 选项 可 见 , 则 需要 选择 “菜单 ”选项 ; 如 果 和 希望 表单 在 浏览 器 显示 
表单 时 列 出 一 些 或 所 有 选项 , 则 需要 选择 “列表 ”选项 。 这 里 选择 “菜单 ”选项 。 

@ 单 击 “ 列 表 值 ”按钮 .打开 “列表 值 ” 对 话 框 ,如 图 8-8 所 示 。 在 该 对 话 框 中 , 单 击 [t] 
按钮 增加 一 个 项 目标 签 , 单 击 器 ] 按钮 则 可 以 删除 一 个 项 目标 签 。 根 据 需 要 为 每 个 菜单 项 
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设置 相应 的 值 。 
© 单 击 “ 确 定 ” 按 钮 ,返回 软件 主 界面 。 通 过 浏览 器 预览 后 的 效果 如 图 8-9 所 示 。 
人 [插入 列表 或 订单 - ... T P K) 


OOD [e rMBMGSCSVE v 
XPD SEOD EV WE” 


w BER w) e 


插入 列表 或 菜单 
请 选择 你 所 在 的 城市 国 


图 8-8 添加 列表 值 图 8-9 菜单 预览 后 的 效果 


© 在 “属性 ”面板 中 ,如 果 将 “类 型 "选择 为 “列表”, 则 激活 “高 度 ” 和 “ 选 定 范围 ”属性 ， 
这 里 设置 高度” 属性 为 *4”, 并 选中 “允许 多 选 " 复 选 框 ,通过 浏览 器 预览 后 的 效果 如 图 8-10 
所 示 。 

@ 将 鼠标 定位 在 “设计 "视图 中 的 表单 域内 ,在 “插入 "面板 的 “表单 类别 中 单 击 “ 跳 
转 菜单 ”按钮 ,打开 “插入 跳 转 菜单 ”对 话 框 。 

© 在 该 对 话 框 中 , 单 击 轩 按钮 增加 一 个 菜单 项 ,在 “文本 ”区域 输 入 跳 转 菜单 项 的 名 
称 ,在 “选择 时 , 转 到 URL? 区 域 输入 跳 转 的 路 径 ,其 他 设置 保持 默认 值 不 变 , 如 图 8-11 
所 示 。 


C MARKERY - vin... EOR 


GO [e rummsicevE v 时 r= 由 
Xie) RED FEV RERA” i 


ttp / /mme, 
中 科技 大 学 Qhttp: //wew. hust. edu. cm/) 
AURR EMERE . F E 


插入 列表 或 菜单 http://www. tsinghua. edu. cn/p) (mE) 


ERAEN A| zeo ` 


| junpllenu 


2 


O RPZEMANEEA 
O ER wat. ptem- 


图 8-10 列表 预览 后 的 效果 图 8-11 “插入 跳 转 菜单 ”对话 框 


O 设置 完成 后 , 单 击 * 确 定 ” 按 钮 , 即 可 插入 一 个 跳 转 菜单 。 在 浏览 器 中 预览 过 程 中 ， 
当选 择 跳 转 菜单 中 某 个 选项 时 , 即 可 跳 转 到 该 选项 对 应 的 网 站 链接 。 
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8.1.5 借助 CSS 美化 表单 


在 CSS 中 没有 特别 用 于 表单 的 专 有 属性 ,使 用 CSS 对 表单 进行 控制 其 实 就 是 对 表单 
域 中 的 元 素 进 行 美 化 。 这 里 以 美化 提交 信息 页 面 为 例 , 向 读者 介绍 CSS 是 如 何 控制 表 
单 的 。 

【演练 8-5】 借助 CSS 美化 表单 。 

O 启动 Dreamweaver, 新 建 空白 XHTML 文档 ,将 所 需 的 图 像 存放 在 站 点 内 "images” 文 
件 夹 中 。 

© 根据 提交 信息 页 面 所 需要 的 表单 对 象 ,插入 文本 框 , 多 行文 本 框 ,以 及 按钮 对 象 ， 
并 输入 相关 的 文字 ,此 时 页 面 结 构 如 图 8-12 所 示 。 


<div id="container"> 
<hl> 借 助 css 英 化 表单 </h1> 
<form id="forml" action="" method="post" target="_blank"> 
<fieldset> 
<p> 
<label for="name"> 姓 名 </label> 
<input type="text" name="name” id="name" size="30" /> 
</p> 
<p> 
<label for="email"> 闻 箱 </1abel> 
<input type="text" name="email" id="email" size="30" /> 


</p> 
<p> 

<label for="web"> 个 人 站 点 </1label> 

<input type="text" name="web" id="web" size="30" /> 


</p> 
</fieldset> 
<fieldset> 
<p> 
<label for="message> 站 内 消息 </label> 
<textarea name="message" id="message" cols="30" rows="10"></textarea> 


<p class="submit"> 
<button type="submit"> 发 送 </button> 


</div> 


图 8-12 ”当前 结构 (1) 


这 里 对 页 面 结构 加 以 分 析 ,整个 登录 框 使 用 名 为 “container” 的 div 容器 将 所 有 登录 
框 元 素 包 含 在 这 个 容器 中 ,这 种 做 法 有 利于 整体 样式 的 控制 。 

表单 元 素 通常 存在 于 所 form 二 标签 内 部 ,通过 二 form 之 标签 中 的 action 属性 和 
method 属性 检查 最 后 表单 中 的 数据 需要 发 送 到 哪个 页 面 并 以 何 种 方式 发 送 。 

对 于 细节 元 素 ,这 里 使 用 二 fieldset 二 标签 将 表单 内 容 的 一 部 分 打包 ,生成 一 组 相关 
表单 的 字段 ,起 到 表单 内 部 分 组 的 作用 。 

此 外 ,还 添加 二 label 二 标签 , 当 用 户 选 择 该 标签 所 包 奢 的 内 容 时 ,浏览 器 就 会 自动 将 
焦点 转 到 和 标签 相关 的 表单 控件 上 ,增加 了 用 户 的 可 用 性 。 

@ 在 充分 了 解 提交 信息 页 面 的 整个 框架 结构 后 ,就 可 以 有 针对 性 地 编写 CSS 样式 
了 。 在 已 经 连接 成 功 的 div. css 文档 内 ,进行 初始 化 设置 以 及 大 容器 样式 ,如 图 8-13 
所 示 。 

@ 接着 为 对 页 面 各 元 素 进行 细 化 ,具体 CSS 规则 如 图 8-14 所 示 。 最 后 ,保存 当前 文 
档 , 通 过 浏览 器 预览 可 以 看 到 最 终 效果 ,如 图 8-15 所 示 。 


169 


|: 页 设计 与 制作 案例 教程 (HTML+TCSSs+Dreamweaver) 


background 
font:13px "RRES"; 
color:#333; 
line-height :160%; 
margin:0; 

padding:0 
text-align:center; 


font-size:200%; 
font-weight:normal; 


) 


font :100% "RRES"; 
line-height:160%; 
color:#3337 

) 

#conta 
margin:0 auto; 
background:#fff; 
width: 600px; 
padding:20px 40px; 
text-align:left; 


} 
#form 1 
margin: lem 0; 
padding-top: 10px; 
background 
url(../images/forml/form_top. 
gif) no-repeat 0 0; 


margin 
padding: 0; 
border:none; 
float:left; 
display:inline; 
width:260px; 
margin-left :25px; 


图 8-13 CSS 规则 (1) 


无 标题 文档 - Windows Internet Ezplorer 


OO Eraimacenssmsec) v| + Xx 
文件 也。 RED FEV 收藏 天 A) IAV 


we @ëxsmrs 


display:block; 


#forml input, 


width:252) 
border:1px solid #ddd; 
background:#fff 

url(../images/form1/form_inpu 

t.gif) repeat-x; 一 
padding: 3px; 


#forml p.submit ( 
clear:both; 
background: 
url(../images/form1/form_bott 
om.gif) no-repeat 0 100%; 
padding:0 25px 20px 25px; 
margin:0; 
text-align:right; 


#forml textarea ( 
height:125px; 
overflow:auto; 


rml bu 
width:150px; 

height:37px; 
line-height:37px; 
border:none 

background 

url (../images/form1/form butt 
on.gif) no-repeat 0 0; 
color:$fff; 
cursor:pointer 
text-align:center 


8-14 CSS 规则 (2) 


3 @ - O- 220- IRV- @- 


借助 CSS 美 化 表单 


姓名 


图 8-15 ”最 终 效果 (1) 


82 框 架 


框架 是 组 织 复杂 页 面 的 一 种 方法 。 使 用 框架 ,可 以 将 浏览 器 显示 窗口 分 割 成 几 个 显 
示 不 同 内 容 的 小 窗口 ,而 且 在 浏览 小 窗口 中 的 网 页 时 ,各 个 窗口 之 间 没 有 影响 。 框 架 通 常 
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的 用 法 是 ,将 一 些 不 需要 经 常 更 新 的 元 素 放置 一 个 框架 内 作为 单独 的 网 页 文档 ,而 其 他 需 
要 经 常 更 新 的 元 素 则 放 在 主 框 架 内 。 


8.2.1 框架 的 基本 概念 


框架 由 两 部 分 组 成 ,一 是 框架 ; 二 是 框架 集 。 框架 集 是 定义 框架 结构 的 XHTML X 
档 ,而 单个 框架 则 是 框架 集中 的 某 个 区 域 。 


1. 框架 


框架 (Frame) 是 浏览 器 窗口 中 的 一 个 区 域 ,包含 在 框架 集中 , 它 是 框架 集 的 一 部 分 ， 
每 个 框架 中 放置 一 个 网 页 内 容 , 组 合 起 来 就 是 浏览 者 看 到 的 框架 式 网 页 。 


2. 框架 集 


框架 集 (Frameset) 实 际 是 一 个 网 页 文件 ,用 于 定义 文档 中 框架 的 布局 和 属性 ,包括 框 
架 的 数目 ,框架 的 大 小 和 位 置 以 及 在 每 个 框架 中 显示 的 页 面 的 URL, 


3. 框架 与 框架 集 的 关系 


当 设 计 人 员 准 备 使 用 多 个 框架 制作 一 个 网 页 时 ,框架 集 文档 就 是 生成 框架 本 身 的 文 
档 。 框 架 集 本 身 不 包含 要 在 浏览 器 中 显示 的 内 容 , 只 是 向 浏览 器 提供 应 该 如 何 显 示 一 组 
框架 ,以 及 在 这 些 框架 中 应 显示 哪些 文档 的 有 关 信 息 。 例 如 , 某 个 页 面 被 创建 为 两 个 杠 
架 , 那 么 它 实 际 包含 三 个 文件 : 一 个 框架 集 文 件 ,两 个 框架 内 容 文件 。 


4. 框架 的 优 缺点 


在 网 页 布局 中 不 提倡 使 用 框架 ,原因 在 于 它 很 难 实现 不 同 框架 中 各 元 素 的 精确 对 齐 ; 
下 载 框架 式 网 页 相对 耗费 时 间 ; 大 多 数 搜索 引擎 无 法 识别 网 页 中 的 框架 。 

如 果 设 计 者 确定 要 使 用 框架 , 它 常 被 应 用 于 导航 , 即 一 个 框架 包含 导航 条 ,一 个 框架 
显示 主要 内 容 。 对 于 这 种 方式 使 用 的 框架 ,可 以 使 得 网 页 结构 变 得 清晰 ; 浏览 器 不 需要 
为 每 个 页 面 重新 加 载 与 导航 相关 的 图 形 元 素 。 


8.2.2 创建 包含 框架 的 文档 


1. 创建 并 保存 框架 


Dreamweaver 提供 了 多 种 创建 框架 集 的 方法 ,无 论 采 用 哪 一 种 方法 ,建议 读者 在 创 
建 框架 集 或 使 用 框架 前 ,执行 菜单 栏 中 的 “查看 ”可视化 助理 ” 盖 框架 边框 ?命令 ,使 得 
框架 边框 在 文档 的 设计 视图 中 能 够 被 显示 出 来 。 
【演练 8-6】 创建 框架 。 
O 启动 Dreamweaver, 在 菜单 栏 中 执行 “文件 ”一 “新 建 " 命 令 ,打开 “新 建文 档 ” 对 
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话 框 。 

© 在 此 对 话 框 中 ,选择 “示例 中 的 页 ”选项 卡 ,在 “示例 文件 夹 ” 中 选择 “框架 页 ”, 在 
RE 8-16 所 示 。 
单 击 “ 确 定 ” 按 钮 即 可 创建 包含 框架 的 页 面 

@ 当选 择 某 一 框架 类 型 后 ,打开 如 图 8-17 所 示 的 对 话 框 。 在 此 对 话 框 中 ,设计 者 需 
要 为 每 个 框架 设置 一 个 标题 ,设置 完成 后 单 击 “ 确 定 ” 按 钮 , 即 可 完成 包含 框架 页 面 的 
创建 。 


和 


xuma amL 1.0 Transitional MA 


Wisem o 


8-16 ”创建 框架 页 


@ 将 鼠标 指针 定位 在 “设计 ”视图 中 ,分 别 在 顶部 、 左 侧 和 主要 内 容 区 域内 输入 相关 
文字 ,如 图 8-18 所 示 。 


T.. ARA (2011) 一 一 机 柜 \ 苇 大 网站 \ch07\ 例 1-6 CMA index htal (XHTXL)* -0x 


框架 标签 畏 助 功能 属性 框架 的 顶部 区 域 ， 此 文档 拟 保存 为 op htmi” 


ERDENE, | 此 文 aR, 此 文档 拟 保存 为 
p Aremaa 1 


8-17 “框架 标签 辅助 功能 图 8-18 “ESAE EMRE KE WER 
属性 ”对 话 框 


© 将 鼠标 指针 定位 在 顶部 框架 页 面 中 , 按 下 组 合 键 Ctrl 十 S, 在 弹出 的 对 话 框 中 将 当 
前 文档 保存 为 “top. html”. 
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© 将 鼠标 定位 在 左 侧 框架 页 面 中 , 按 下 组 合 键 Ctrl 十 S, 在 弹出 的 对 话 框 中 将 当前 文 
档 保存 为 “left. html”, 

© 将 鼠标 定位 在 主要 内 容 区 域 , 按 下 组 合 键 Ctrl 十 S, 在 弹出 的 对 话 框 中 将 当前 文档 
保存 为 “main. html”, 

借助 “框架 ”面板 ,选择 整个 框架 集 , 按 下 组 合 键 Ctrl 十 S, 将 整个 框架 集 保 存 为 
“index. html”, 

至 此 ,已 经 将 页 面 中 包含 的 所 有 框架 和 框架 集 保存 完成 。 就 本 示例 而 言 ,“index. 
html” 文 件 保存 的 是 框架 集 信息 ,“top. html” “left. html” 和 “main. html” 分 别 保存 的 是 对 
应 3 个 框架 的 页 面 。 


2. 选择 框架 


Dreamweaver 中 的 “框架 ”面板 为 用 户 提供 了 框架 集 内 各 框架 的 可 视 化 效果 。 在 软 
件 菜单 栏 中 执行 “窗口 ">“ 框 架 ” 命 令 , 即 可 打开 “框架 ”面板 ,如 图 8-19 所 示 。 

在 “框架 ”面板 中 ,环绕 每 个 框架 集 的 边框 非常 粗 ; 而 环绕 每 个 框架 的 是 较 细 的 灰 线 ， 
并 且 每 个 框架 由 框架 名 称 进行 标识 。 在 选 定 了 一 个 框架 后 ,其 边框 被 虚线 环绕 ; 在 选 定 
了 一 个 框架 集 后 ,该 框架 集 内 各 框架 的 所 有 边框 都 被 虚线 环绕 ,如 图 8-20 所 示 。 


Untitledrrameset-s (XRTWL)+ 


“435 x 380v 1 K / 1 É Uni 


图 8-19 “框架 ?面板 图 8-20 ”选中 框架 
此 外 ,将 鼠标 移动 到 框架 内 部 的 分 割 线 上 ,此 时 鼠标 指针 变 为 双向 箭头 , 按 下 鼠标 左 
键 拖 动 鼠标 , 即 可 调整 框架 集 内 各 框架 的 大 小 。 
3. 在 框架 中 打开 其 他 网 页 文档 
【演练 8-7】 在 框架 中 打开 其 他 网 页 文档 。 
D 使 用 “演练 8-6” 继 续 本 例 的 制作 。 在 Dreamweaver 中 ,创建 普通 XHTML 文档 ， 


在 文档 内 部 插入 一 幅 图 像 ,将 该 文档 保存 为 “pic. html”, 
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© 将 鼠标 定位 在 “设计 ”视图 中 主要 内 容 区 域 ,执行 软件 菜单 栏 中 的 “文件 ”>“ 在 框 
架 中 打开 ”命令 。 

© 随后 ,在 弹出 的 对 话 框 中 选择 之 前 制作 的 “pic. html”* 文 档 , 单 击 “ 确 定 ” 按 钮 , 即 可 
将 该 文档 打开 在 中 部 框架 内 ,如 图 8-21 所 示 。 


r BRUNEI E SAP ft (2011) —TEUS PEF e hP- 在 杠 拓 中 杂 开 其 他 下 页 文档 \pic. htal (um) 


框架 的 顶部 区 域 ， 此 文档 所 保存 为 “top htmr 


框架 的 左 侧 区 域 ， 此 文档 拟 
保存 为 "left hum” 


TEE] ROQ 100x ~ S62 x 204v 30 K / 1! Ë° Unicode (UIF-0) 


8-21 在 框架 中 打开 其 他 页 面 文档 


8.2.3 设置 框架 和 框架 集 属性 


一 个 包含 框架 的 页 面 ,每 个 框架 和 框架 集 都 有 各 自 的 属性 面板 ,通过 对 框架 名 称 、 边 
框 , 边 距 以 及 是 否 在 框架 中 显示 深 动 条 等 多 方面 的 设置 ,可 以 实现 网 页 设计 中 的 多 种 


1. 设置 框架 属性 


要 对 页 面 中 某 一 框架 进行 设置 ,首先 在 “框架 ”面板 中 选择 该 框架 ,然后 执行 “窗口 ”~ 
“属性 ”命令 ,打开 “属性 ”面板 ,如 图 8-22 所 示 。 


RO 


=3 
Ra [gu ~ 口 FIRE 大 小 四 ummeo | 


图 8-22 框架 的 属性 面板 


框架 属性 面板 的 各 参数 含义 如 下 。 

° 框架 名 称 : 用 于 设置 当前 框架 的 名 称 。 由 于 此 名 称 将 被 超 链 接 和 脚本 应 用 ,所 
以 ,框架 名 称 必须 以 字母 开头 (不 能 以 数字 开头 ) ,允许 使 用 下 画 线 ””, 但 不 允许 
使 用 连 字符 “-”\ 句 点 “.” 和 空格 的 单词 。 此 外 ,不 要 使 用 JavaScript 中 的 保留 字 
(例如 top 或 navigator) 作 为 框架 名 称 。 
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源 文件 : 用 于 指定 在 当前 框架 中 显示 的 源 文档 。 可 以 直接 在 后 面 的 文本 框 中 输 

入 文件 名 或 单 击 文件 夹 图 标 ,浏览 并 选择 一 个 文件 。 

滚动 : 用 于 设置 在 框架 中 是 否 显示 滚动 条 ,包含 “是 "“ 和 否 "“ 自 动 ” 和 * 默 认 ”4 个 

选项 。 其中“ 默认" 指 的 是 不 设置 相应 属性 的 值 ,从 而 使 各 个 浏览 器 使 用 其 默认 

值 ,但 大 多 数 浏览 器 默认 为 “自动 ”, 这 意味 着 只 有 在 浏览 器 窗口 中 没有 足够 空间 

来 显示 当前 框架 的 完整 内 容 时 才 显示 滚动 条 。 

不 能 调整 大 小 : 选中 该 复 选 框 , 则 浏览 者 无 法 通过 拖 动 框架 边框 在 浏览 器 中 调整 

框架 大 小 。 

* 边框 : 用 于 设置 当前 框架 是 否 显示 边框 ,包含 “默认 ”“ 是 ”和 “ 否 ”3 个 选项 。 为 框 
架 选 择 “ 边 框 ?选项 将 覆盖 框架 集 的 边框 设置 。 

° 边框 颜色 : 设置 所 有 框架 边框 的 颜色 。 此 颜色 应 用 于 和 框架 接触 的 所 有 边框 ,并 
且 重 写 框架 集 的 指定 边框 颜色 。 

"边界 宽度 : 以 像素 为 单位 设置 左边 距 和 右边 距 的 宽度 。 

"边界 高 度 : 以 像素 为 单位 设置 上 边 距 和 下 边 距 的 高 度 。 


2. 框架 集 属性 设置 


在 文档 "设计 ?视图 中 单 击 两 个 框架 之 间 的 边框 ,或 者 在 “框架 ?面板 中 单 击 围绕 在 框 
架 集 的 边框 ,可 以 选择 一 个 框架 集 。 此 时 ,“ 属 性 ”面板 中 就 会 显示 框架 集 的 相关 属性 ,如 
图 8-23 所 示 。 
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8-23 框架 集 属性 面板 


框架 集 属 性 面板 的 各 参数 含义 如 下 。 

。 边框 : 用 于 设置 在 浏览 器 中 查看 文档 时 是 否 应 在 框架 周围 显示 边框 ,包含 “是 ”、 
“ 否 ”" 和 “默认 ”3 个 选项 。 

。 边 框 宽度 : 用 于 设置 框架 集中 所 有 边框 的 宽度 。 

。 边 框 颜色 : 用 于 为 边框 添加 颜色 。 

。 行 列 选 定 范围 : 用 于 设置 选 定 框架 集 的 行 和 列 的 框架 大 小 。 在 “行列 选 定 范围 
区 域 右 侧 单 击 示例 图 ,然后 在 * 值 ”文本 框 中 ,输入 高 度 或 宽度 即 可 。 


83 商用 案例 一 团购 网 页 面 的 设计 与 实现 


团购 作为 一 种 新 兴 的 电子 商务 模式 ,通过 消费 者 自行 组 团 、 专 业 团 购 网 站 、 商 家 组 织 
团购 等 形式 ,提升 用 户 与 商家 的 议价 能 力 , 并 极 大 程度 地 获得 商品 让 利 , 引 起 消费 者 及 业 
内 厂商 以 及 终端 市 场 的 关注 。 
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目前 ,团购 的 形式 主要 是 网 络 团购 ,所 以 各 类 团购 网 站 层出不穷 。 本 节 就 以 团购 网 的 
设计 与 实现 为 例 , 向 读者 介绍 表单 及 其 CSS 方面 的 知识 。 


8.3.1 页 面 规划 


图 8-24 所 示 的 是 该 页 面 的 最 终 效 果 , 从 页 面 整 个 布局 来 看 ,可 以 将 整个 页 面 分 为 头 
部 .主体 和 底部 三 大 板块 ,而 主体 区 域 又 由 左 侧 主 要 内 容 区 域 和 右 侧 快速 链接 组 成 。 


dilsean = 


Ki 


【麻辣 诱惑 】 一 m 
仅 多 118 元 /216 元 , MA20S7/3667ARA MASE eu | V aQ 8 
F. RARE) REREAD, JaA ! 节假日 通用 上 28. 
ED y 
g 
imisa ë 
wl" 
ma wrapper 
header 
nav 
ad 
left_content right_sider 
main 
goods 
footer 
图 8-24 “团购 网 ”最 终 效果 图 8-25 示意 图 (1) 


从 细节 来 看 ,实现 整个 页 面 重点 在 于 主要 内 容 区 域 中 产品 “抢购 ”部 分 的 布局 ,这 里 拟 
使 用 无 序列 表 和 浮动 的 知识 进行 实现 。 至 于 其 他 页 面 布局 ,在 之 前 的 章节 中 已 经 进行 了 
学 习 , 实 现 起 来 没有 太 大 难处 。 

通过 对 页 面 简单 的 分 析 , 结 合 之 前 所 学 习 的 知识 .可 以 将 页 面 作 如 下 规划 。 

(D 使 用 wrapper 容器 将 页 面 所 有 元 素 进行 包 庄 ,方便 对 整体 内 容 加 以 控制 。 

© 在 页 面 顶部 创建 header 容器 ,用 于 放置 公司 Logo 和 搜索 框 。 

@ 接着 使 用 无 序列 表 制 作 网 页 的 横向 导航 。 

@ 创建 left_content 容器 ,用 于 放置 主要 内 容 区 域 的 所 有 元 素 。 使 用 无 序列 表 和 浮 
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动 知识 实现 “抢购 ?部 分 的 布局 ,再 利用 赃 套 标签 的 组 合 实现 其 他 页 面 信息 。 

© 创建 right_sider 容器 ,用 于 放置 右 侧 快速 链接 的 所 有 元 素 , 青 利用 有 序列 表 、h2 
元 素 和 p 元素 的 组 合 实现 右 侧 布局 。 

© 最 后 创建 footer 容器 ,放置 版 权 信息 。 

通过 上 述 深 思 熟 虑 的 设计 ,可 以 画 出 页 面 布局 示意 图 ,如 图 8-25 所 示 。 


8.3.2 页 面 的 具体 实现 


1. 页 面 制 作 前 的 准备 工作 


O 启动 Dreamweaver 创建 站 点 ,并 在 站 点 内 分 别 创建 用 于 放置 图 像 的 “images” 文 件 夹 
和 放置 CSS 文件 的 “style" 文 件 夹 ,并 将 所 需 图 像素 材 拷贝 到 站 点 的 “images" 文 件 夹 内 。 

© 分 别 创建 空白 XHTML 文档 和 CSS 文档 ,将 网 页 文档 保存 在 根 目 录 下 ,并重 命名 
为 “index. html” ,将 CSS 文档 保存 在 style 文件 夹 下 ,并 重 命 名 为 “div. css”, 

O 将 创建 完成 的 网 页 文档 和 CSS 文档 链接 起 来 。 


2. 页 面 头 部 区 域 的 实现 


O 待 准备 工作 结束 后 ,切换 到 “index. html” 文 档 中 ,在 “插入 ”面板 的 “常用 ”选项 卡 
中 单 击 “ 插 入 Div 标签 ”按钮 ,弹出 “插入 Div 标签 ”对 话 框 ,在 “插入 ”下 拉 菜 单 中 选择 “在 
插入 点 ”选项 ,在 “ID”* 下 拉 列 表 框 中 输入 wrapper, 最 后 单 击 “ 确 定 ” 按 钮 , 即 可 在 页 面 中 插 
人 wrapper 容器 。 

© 切换 到 “div. css” 文 档 ,为 整个 页 面 进行 初始 化 定义 ,如 图 8-26 所 示 。 


/* 页 面 初始 化 */ 
h 


padding: 0; 

border: 0; 

outline: 0; 

font-size: 100%; 
background: transparent; 


text-decoration:none; 
color:#5f5f5f; 


a:hover (text-decoration:none;) 
table {border-collapse:collapse; } 
fieldset, img {border:0; 
ol, ul {list-style:none; 
caption, th (text-align:left;) 
hl, h2, h3, h4, h5, h6 { 
font-size:100%; 
font-weight :normal; 


clear (clear:both; } 
-£1 (float:left;) 
.Er {float:right;} 


7* 页 面 初始 化 end */ 
图 8-26 初始 化 规则 
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@ 切换 回 “index. html” 文 档 中 ,删除 
wrapper 容器 内 多 余 文 字 , 在 “插入 ”面板 的 “ 常 | wa [Bn 加 [eserves 加 
用 ”选项 卡 中 单 击 “ 择 入 Div 标签 "按钮 ,按照 如 | 二 一” 

图 8-27 所 示 的 参数 设置 在 wrapper 容器 内 部 插 
À header 容器 。 

@ 在 header 容器 内 部 ,依次 使 用 段落 元 素 图 8-27 插入 header 容器 
p 和 标题 元 素 hl 作为 盛 放 容 器 ,放置 相关 文字 
链接 和 公司 Logo, 具 体 结构 如 图 8-28 所 示 。 这 里 为 p 元 素 增加 ID 的 目的 是 方便 控制 其 
内 部 的 文字 ,为 hl 元 素 增加 向 左 浮动 的 属性 是 为 了 让 Logo 能 够 在 左 侧 显示 。 


<div id="wrapper"> 
<div id="header"> 
<p id="plogin"><a hreT="#"> 登 录 </a>1<a href="#"> 注 册 </a></p> 
<h1 class="f1"><img src="images/logo.png" width="239" height="46" /></h1> 
</div> 
</div> 


8-28 当前 结构 (2) 


© 切换 到 “div. css” 文 档 中 ,编写 相应 的 CSS 规则 ,具体 内 容 如 图 8-29 所 示 。 切 换 回 
“index. html” 文 档 中 ,在 hl 元 素 的 后 面 插入 名 为 “header_seach” 的 div 容器 ,并 对 该 容器 
应 用 向 右 浮 动 的 属性 ,然后 在 该 容器 内 部 创建 文本 框 表单 对 象 和 提交 按钮 表单 对 象 ,具体 
结构 如 图 8-30 所 示 o 


body, button, input, select, 
textarea { 

font: 12px/1.5 Arial, Tahoma, 
Verdana, ' 宋 体 "'， sans-serif; 
) 
#wrapper ( 

width:1020px; 

margin:0 auto; 


) 

#header ( 
width:1020px; 
float:left; 

) 

.logo ( 
margin-top: 10px; 


width:239px; 分 别 为 表单 对 象 增加 类 规则 ， 其 目的 在 于 方便 对 表单 对 象 美化 控制 


) 

#plogin 
height:18px; <hl class="f1"><img src=": 
line-height:18px; 
margin-top: 4px; 
margin-bottom: 10px; 
text-align:right; 


gàs/Tego.png" width="239" height="46" /></h1> 
lue=" 输 入 产品 名 、 商 圈 、 商 家 关键 字 "/> 
t" class="seatch btn" value=" " /> 


) 


图 8-29 CSS 规则 (3) 图 8-30 页面 结构 (1) 


© 切换 到 “div. css” 文 档 中 ,编写 相应 的 CSS 规则 ,具体 内 容 如 图 8-31 所 示 。 保 存 当 
前 网 页 文档 ,通过 浏览 器 预览 可 以 看 到 效果 ,如 图 8-32 所 示 。 

© 切换 回 “index. html” 文 档 中 ,将 鼠标 定位 在 “设计 ”视图 中 ,在 “插入 ”面板 的 “ 常 
用 ”选项 卡 中 单 击 “ 插 入 Div 标签 ”按钮 ,按照 如 图 8-33 所 示 的 参数 设置 在 header 容器 后 
面 插入 nav 容器 。 

在 nav 容器 内 部 使 用 无 序列 表 作 为 容器 制作 网 站 导航 ,具体 页 面 结构 如 图 8-34 
所 示 。 
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#header ch 


width: 400px; 


header : 
background 

url(../images/search box4.png) no-repeat 

Scroll 0 0 transparent; 

width:365px; 

height: 40px; 

overflow:hi 


float:righi 
display:inline; 


width:278px; 
height:18px; 
line-height:18px; 
font-size:16px; 
color:ta2a2a2; 
border: 
padding: 6px 10px; 
margin: 6px Opx Opx 3px; 


#header_seach 

float:left; 

width: 60px; 

height:38px; 

border:none; 

cursor: pointer; 

background: none repeat scroll 0 0 
transparent; 


图 8-31 CSS 规则 (4) 


/无 标题 文档 - Windows Internet Explorer DER 
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8-32 ”预览 效果 (1) 


MA: | 在 标签 之 后 |<div id"header"》 w 


ID: 


图 8-33 插入 nav 容器 


© 切换 到 “div. css” 文 档 中 ,编写 相应 的 CSS 规则 ,具体 内 容 如 图 8-35 所 示 。 保 存 当 
前 网 页 文档 ,通过 浏览 器 预览 可 以 看 到 效果 ,如 图 8-36 所 示 。 
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#nav { 
background: 

ur1(. ./images/nav_bg.png) 

repeat-x 0 0; 
height:35px; 
width:1020px; 
float:left; 
margin-top: 10px; 

} 

#nav ul li { 
list-style:none; 

) 

#nav ul li a ( 
display:block; 
width:100px; 
height:35px; 

<div id="wrapper"> float:left; 
i he. line-height :35px; 
margin-right: 10px; 
软 雅 


font-family:" ", "Ri", 
<div id="nav"> Verdana, sans-serif; 
<ul> font-size:l6px; 
<li><a href="#"> 今 日 团购 </a></1i> text-align:center; 
<li><a href="#"> 团 购 列表 </a></1i> Color:#FFF; 
<1i><a href="#"> 团 购 预告 </a></1i> ) 
<li><a href="#"> 积 分 商城 </a></1i> #nav ul li a:hover 1 
<li><a href="#"> 优 惠 券 </a></1i> background: 
</ul> url(../images/nav_bg.png) 
</div> repeat-x 0 -35px; 
</div> ) 
图 8-34 页 面 结构 (2) 图 8-35 CSS 规则 (5) 
Emri 
if 
isaema : E. AFAN ns | 


今日 团购 [a 


8-36 ”预览 效果 (2) 


D fE nav 容器 后 面 插入 ad 容器 ,并 应 用 “clear” 类 清除 ua 人 
之 前 所 应 用 的 浮动 效果 。 在 ad 容器 内 部 插入 一 幅 图 像 作 eigne: Tops 
margin: 5px 0; 


为 拓展 广告 宣传 时 的 位 置 。 切 换 到 “div. css” 文 档 中 ,编写 or a ed 
ad 容器 的 CSS 规则 ,如 图 8-37 所 示 。 ) 

3, 左 侧 主体 区 域 的 实现 8-37 CSS 规则 (6) 

之 前 ,在 对 页 面 初次 分 析 时 就 指出 , 左 侧 主 体 区 域 包含 较 难 实现 的 布局 ,为 了 后 续 过 
程 顺 利 进 行 ,这 里 对 局 部 内 容 的 实现 进行 详细 分 析 。 

仔细 观察 该 区 域 , 拟 创建 main 容器 作为 盛 放 所 有 元 素 的 外 包 里 ; 为 了 凸显 团购 产品 
信息 通常 在 顶部 用 较 大 字体 显示 产品 的 名 称 和 产品 解释 ,这 里 拟 采用 h2 标签 和 p 标签 解 
决 文字 显示 问题 ; 对 于 复杂 的 “抢购 信息 区 域 ”, 拟 创建 dm_fl 容器 作为 该 区 域 的 外 包 右 ， 
里 面 进一步 可 以 细 化 为 dm_buy 容器 和 dm_infor 容器 。 通 过 这 种 细致 的 分 析 , 可 以 将 布 
局 规划 与 效果 图 对 应 起 来 ,如 图 8-38 所 示 。 这 种 处 理 问题 的 办 法 在 实际 工作 中 十 分 有 
用 ,希望 读者 加 以 借鉴 。 

OD 将 鼠标 定位 在 “设计 ”视图 中 ,在 “插入 ”面板 的 “常用 ”选项 卡 中 单 击 “ 插 入 Div 标 
得 ”按钮 ,按照 如 图 8-39 所 示 的 参数 设置 在 ad 容器 后 面 插入 left_content 容器 ,并 应 用 和 
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main 


deta main 
dm fl 


dm_buy 


im infor 


ul class="dm i" 


div class="dm_in" JJI] 


div class="dm _inf" J4 


8-38 布局 示意 图 与 效果 图 的 对 应 关系 


类 ,使 其 向 左 浮动 。 

© 类 似 的 操作 方法 ,在 left_content 容器 内 部 创建 main 容器 ,并 应 用 纤 类 ,使 其 向 左 
浮动 。 在 main 容器 内 部 ,使 用 h2 元 素 和 pp 元素 盛 放 相关 文字 内 容 , 为 了 方便 需要 为 p 元 
素 应 用 dp 类 ,以 便 修改 字体 外 观 ,此 时 的 页 面 结构 如 图 8-40 所 示 。 


HA Div 标签 


插入 
m: 
m: 


在 标签 之 后 


M| [<div id="ad"> 
` 
left_eentent 


新 建 CSS 规则 


图 8-39 插入 left_content 容器 


仅 售 118 元 /216 元 ,价值 205 元 /366 元 的 双人 /四 人 套餐 ! 经 典 川 
3 ,麻辣 好 味道 ! 里 羡 侈 华商 圈 ，4 店 可 选 ! 节假日 通用 ! 


<div id="ad" class="clear">[ing sr...</div> 
<div id="left_content”class="fl"> 


<div id="main" class="fl"> 


<H2>【 麻 冻 诱 惑 】</H2> 


<p class="ap"> ISET] </p> 
</div> 
</div> 


8-40 页 面 结构 (3) 


© 切换 到 “div. css 文档 中 ,编写 相应 的 CSS 规则 ,具体 内 容 如 图 8-41 所 示 。 切 换 回 
“index. html" 文 档 中 ,根据 布局 示意 图 的 嵌 套 关系 创建 一 系列 容器 ,如 图 8-42 所 示 。 


#left content 1{ 


} 


width:750px; 


#main { 


} 


width:720px; 
height: auto; 
padding: 10px; 
border:4px #fa5d82 solid; 


#main h2 ( 


} 


font-size:28px; 
line-height :36px; 
margin:22px 0 0 22px; 


font-family: ' 微 软 雅 黑 '，' 黑 体 ',' 宋 体 '; 


Color:#414141; 


#main .dp { 


font-size:24px; 
margin:0 0 0 22px; 
line-height :30px; 


font-family: ' 微 软 雅 黑 ' ，' 黑 体 ',' 守 体 '; 
color:#434343; 
padding-right:14px; 

图 8-41 CSS 规 则 (7) 


<div id="main" class="fl"> 
<H2> [RRES] </n2> 
<p class="ap">(EI187/... 
<div class="deta_main"> 
<div class="dm_f1"> 
<div clas: 
<div class= 
</div> 
</div> 
</div> 


8-42 页 面 结构 (4) 


</p> 


dm_ buy"></div> 
dm infor"></div> 
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@ 切换 到 “div. css" 文 档 中 ,编写 相应 的 CSS 规则 ,具体 内 容 如 图 8-43 所 示 。 保 存 当 
前 网 页 文档 ,通过 浏览 器 预览 可 以 看 到 效果 ,如 图 8-44 所 示 。 在 dm_buy 容器 内 部 ,使 用 
p.span 和 a 元 素 创建 产品 的 价格 和 透明 的 超 链接 ,具体 页 面 结构 如 图 8-45 所 示 。 


-deta main { 
margin:10px 0 0 0; 

} 

-dm fl { 
float:left; 
width:222px; 
height:320px; 
display:inline; 
margin-left:5px; 

} 

.dm buy 1 
height:57px; 
background: 

url(../images/buy_bg1.jpg) no-repeat; 
overflow:hidden; 
zoom: 1; 


【麻辣 诱惑 ] 
仅 售 118 元 /216 元 ,价值 205 元 /366 元 的 双人 /四 人 套 狠 ! 经 典 川 
菜 ,麻辣 好 味道 ! EARLEN, JTA! 节假日 通用 ! 
， 9] 
-dm infor { 
border:1px #dde8ee solid; 
border-top: none; 
width:204px; 
margin-left:15px; 
height :262px; 
background: #f1f6f9; 
overflow:hidden; 


8-43 CSS 规则 (8) 8-44 ”预览 效果 (3) 


© 切换 到 “div. css” 文 档 中 ,编写 相应 的 CSS 规则 ,如 图 8-46 所 示 。 通 过 浏览 器 预览 
可 以 看 到 效果 ,如 图 8-47 所 示 。 使 用 同样 的 操作 方法 ,在 dm_infor 容器 中 创建 应 用 dm_ 
il 类 的 无 序列 表 , 并 在 其 后 面 依次 创建 并 列 关系 的 2 个 容器 ,如 图 8-48 所 示 。 


-dm buy p ( 
float:left; 
display:inline; 
width; 110px; 
font-size: 32px; 
margin:0 0 0 30px; 
color:#fff; 
line-height :52px; 
font-family:Helvetica, Arial; 
text-shadow: 1px 1px lpx #333; 


-dm buy a { 


width: 80px; 
height:50px; 


<div class="deta_main"> display:block; 
<div class="dm_fl"> float:right; 
<div class="dm buy"> } 
<P><SPAN class="unit">¥</SPAN>118</P> -unit ( 
<A href="#"></A></div> font-size: 24px; 
<div class="dm_infor"></div> vertical-align: middle; 
</div> ü font-weight: normal; 
</div> 
8-45 ”页 面 结构 (5) 8-46 ”CSS 规则 (9) 


<div class="dm infor"> 
<ul class="dm i"> 
<1li><strong> 原 价 </strong><span>¥205</span></1i> 
<li><strong> 折 扣 </strong><span>5.8 折 </span></1i> 
<li><strong> 节 省 </strong><span>¥87</span></1i> 


</ul> 
”118 EAD am eed yae 
</div> 
图 8-47 预览 效果 (4) 图 8-48 页面 结 构 (6) 
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© 切换 到 “div. ess" 文 档 中 ,编写 相应 的 CSS 规则 ,如 图 8-49 所 示 。 这 里 需要 注意 的 
是 ,通过 对 无 序列 表 中 1 元 素 增加 坚 线 背 景 以 及 底部 细 线 边框 ,使 得 最 终 呈 现 效 果 类 似 
表格 外 观 。 

© 在 dm_in 容器 内 部 插入 2 个 div 容器 ,并 在 其 中 根据 实际 需要 使 用 span 和 em 等 
行内 元 素 对 文字 内 容 进行 分 割 , 以 便 后 期 可 以 针对 不 同 的 标签 元 素 编写 CSS 规则 ,此 时 
的 页 面 结 构 如 图 8-50 所 示 。 


.dam i { 
overflow:hidden; 
zoom: 1; 
height:41px; 
border-bottom:lpx #elebf0 solid; 
} 
-dmi li { 
float:left; 
width: 68px; 
background: url (../images/shu.jpg) 
right 0 no-repeat; 
text-align:center; 
} 
.dm i strong, .dm i span 
display:block; 
} 
-dm i strong { 
height :22px; 
line-height :22px; 
color:#56585c; 
) <div class="dm_in"> 


.dm i span { <div> 剩 余 时 间 </div> 
color:#4a4b4b; <div class="sep"><span><em>12 
font-weight:bold; </em> 时 <em>06</em> 分 <em>39</em> 秒 </span></div> 

) </div> 

图 8-49 CSS 规则 (10) 图 8-50 页 面 结构 (7) 


切换 到 “div. ess” 文档 中 ,编写 相应 的 CSS 规则 ,如 图 8-51 所 示 。 切 换 回 “index. 
html” 文 档 中 ,在 dm_inf 容器 中 创建 一 系列 容器 ,其 页 面 结构 如 图 8-52 所 示 。 


-dm in { 
height:36px; 
text-align:center; 
border-left:1px #fff solid; 
border-bottom:lpx #fff solid; 
line-height :18px; 
padding: 6px 0; <div class: inf"> 
color:#56585c; <div clas: Lo"><strong>1368</strong> 人 参 团 </div> 


} <div class="dm t"> 
-dm_in em { <div class="gr_s"></div> 

font-weight :bold; <div class=dm th> 

margin-left :px; <div style="display: block;" class="count_iconl"></div> 
} <div style="display: block;" class="count icon2"></div> 
-dm in .sep { </div> 

font-size:14px; </div> 
) </div> 

8-51 CSS 规则 (11) 图 8-52 页 面 结 构 (8) 


@ 切换 到 “div. css” 文 档 中 ,编写 相应 的 CSS 规则 ,如 图 8-53 和 图 8-54 所 示 。 通 过 
浏览 器 预览 可 以 看 到 效果 ,如 图 8-55 所 示 。 

D 在 dm_fl 容器 后 面 插入 dm_fr 容器 ,并 在 其 中 插入 一 幅 产 品 的 精美 图 片 , 其 结构 
如 图 8-56 所 示 。 切 换 到 “div. css” 文 档 中 ,编写 相应 的 CSS 规则 ,如 图 8-57 所 示 。 最 后 ， 
通过 浏览 器 预览 可 以 看 到 该 区 域 的 最 终 效 果 。 
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-dm inf { 


1 


height:170px; 
border-top:lpx #elebf0 solid; 
text-align:center; 
background:#fff; 


-dmo { 


margin-top: 6px; 
font-weight :bold; 
color:#5c5c5c; 


-dm th ( 
padding:0 22px 0 22px; 
} 
-count_iconl ( 
width:159px; 
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font-size:16px; height: 33px; 
} overflow:hidden; 


-dm o strong { background: 原价 å rm 节省 
color:#e7390e; url(../images/tk_icon.jpg) ¥205 sai vs? 
margin-right:8px; no-repeat; mat 


} margin-bottom: 8px; 1 于 069 39 秒 
-dmt { } 
overflow:hidden; 1368 ASAI 
} 
-dmt .gr_s { height:33px; @ mwa 
width:104px; overflow:hidden; 
height:24px; background: TE x= 
margin:14px auto; url(../images/tk_icon.jpg) 0 -99px k At 


background: no-repeat; 


url(../images/dm t.jpg) no-repeat; margin-bottom: 8px; dr TEB MUD 
) } 
8-53 CSS 规则 (12) 图 8-54 CSS 规则 (13) 8-55 ”预览 效果 (5) 


-dm fr 


<div class="deta main"> float: left; 


<div class="dm fl1"> width:470px; 
<div cl height:320px; 
</div> display:inline; 


<div class="dm_fr"> margin-left:10px; 


<div class="dm_img"><img src= } 
"images/001.jpg" width="470" height="285" /></div> .dm img { 
</div> padding:20px 0 0 Opx; 
</div> } 


8-56 页 面 结构 (9) 8-57 “CSS 代码 


至 此 ,团购 网 最 重要 的 布局 已 经 制作 完成 了 ,至 于 页 面 中 其 他 布局 十 分 简单 ,之 前 的 章 
节 也 有 类 似 的 制作 方法 ,这 里 不 再 详细 叙述 ,请 读者 参照 源 文 件 完成 以 后 的 页 面 布局 。 
84 = 训 


1. RIEK 


利用 本 章 所 学 习 的 框架 知识 ,构建 简易 的 .包含 框 == 
架 的 多 个 页 面 ,在 制作 过 程 中 各 框架 页 面 采用 “DIV + 
CSS” 的 模式 制作 ,最 终 实 现 多 个 页 面 可 以 相互 访问 。 
2. 过程 指导 lefthtml main-02 html 
O 启动 Dreamweaver CS5 ,并 创建 站 点 。 新 建 
“上 方 固 定 , 左 侧 拒 套 ” 的 框架 页 。 E sm, 
@ 分 别 将 框架 页 根据 图 8-58 所 示 的 内 容 进行 


保存 。 图 8-58 示意 图 (2) 


184 


#83 网 页 元 素 一 一 表单 与 框架 


© 由 于 顶部 和 左 侧 框架 内 容 基 本 不 变 , 可 以 分 别 在 “top. html” M“ left. html” 页 面 顶 
部 head 区 域 创建 内 部 样式 。 

@ 根据 实际 需要 ,对 于 “main-01. html” 至 “main-05. html” 多 个 网 页 ,可 以 创建 内 部 
样式 ,也 可 以 创建 外 部 样式 。 

制作 过 程 中 , 边 制 作 边 保 存 边 预览 ,最 终 效 果 可 参照 图 8-59 所 示 。 


文件 四 MO ZEV BRAW IAV EBU J 
ARRE Erm A-D — m - 00- 220- IRV- @- 


HTML 5 简介 


HTML 标准 自 1999 年 12 月 发 布 的 HTML 4.01 后 ， 后 继 的 HIML 5 和 
* HTML SfifB CAMERA ， z: ER. Jaam 
* HTML SEE ” 
* HTML SfE 
- HTML SIRF 


8-59 ”最 终 效果 (2) 


85 7J 题 


1. 什么 是 表单 ? 列举 常见 的 表单 应 用 形式 。 

2. 表单 域 是 通过 二 form 二 标签 和 二 /form 二 标签 来 实现 的 ,那么 表单 对 象 能 否 放 置 
在 二 form 二 标签 和 二/form 放 标签 以 外 呢 ? 

3.“_blank”、“_parent”、“_self” 和 “_top” 分 别 指 的 是 什么 ? 

4. 复 选 框 与 复 选 框 组 最 重要 的 区 别 是 什么 ? 

5. 什么 是 框架 ? 什么 是 框架 集 ? 他 们 之 间 有 何 联系 ? 

6. 如 何在 框架 中 打开 其 他 网 页 文档 ? 

7. 使 用 创建 表单 的 基本 方法 实现 如 图 8-60 所 示 的 简单 表单 页 面 。 

8. 结合 CSS 的 知识 ,在 创建 表单 页 面 的 基础 上 美化 表单 ,实现 如 图 8-61 所 示 的 


9. 利用 框架 的 相关 知识 ,创建 "上方 固定 , 左 侧 嵌 套 ?” 的 框架 结构 ,并且 按照 如 图 8-62 
和 图 8-63 所 示 的 内 容 制作 框架 网 页 ? 
185 


页 设计 与 制作 案例 教程 (HTML+CSs+Dreamweaver) 


indows Internet Explorer 


SO | 由 FEHRSTES\R 国 | 好 | x Ps 
: EPD SEW ZEV BRZO BRZA IAD WHW 


aer 63a Ua- D = @ - mmv- 
已 注册 用 户 登录 
Bpa= 
mPa 
E 
OD wes E 
您 右 记 容 码 ? 
电子 邮箱 ; | 读 输 入 一 个 您 已 拥有 的 Emal 也 址 未 注册 创建 账户 
PRIIKS: REER 
re masu pe RANEE DAMNN. TAEZ WIRAUURDEIR 
tp:/1t.qq. rr: 
s o j 用 户 各 "人 多 30 人 1 字符 ) 
电子 条 . 
密码 : = "(最 多 15 个 字符 ) 
S Rsm[ | 
RUSH: mergak O 先 看 看 条 款 ? 
N] [FE 
生日 : FL AL a “在 提交 的 注册 信息 时 ,我 们 认为 低 忆 经 同意 了 委 们 的 服务 条 吉 
REEK EER E FIN RETER. 
性 别 : @ 男 Ox 
mas: [中国 Sin — s m 
图 8-60 习题 7 对 应 图 图 8-61 习题 8 对 应 图 


Pp 
INO MV FEV MLO HEV IAD HAY 


BH c x ox m e 
EED B 


My Website 


萨 格 勒 布 


萨 格 勒 布 属 温带 大 陆 性 气候 ， 年 均 气 渴 9. 3C. FEKETEK. 
该 市 与 上 洗 市 结 为 友好 城市 。 萨 格 租 布 原意 为 " 战 灌 "，1096 年 首次 在 史料 
XWP Hs TO f900£4Ff9ln: 


MEL PfS9yd 9 6EPS RL460nii i L 3 Rae 09. 1557F 
布 首 次 以 克罗地亚 首都 名 义 出 现 。1850 年 TRUNERA NR ETE 
Dona sr Ae oa 要 工业 部 

有 石化 、 医药 机械、 电学 和 食品 加 工 等 。 著 名 的 大 企业 有 伊 纳 
和 zena, PE Suma EAS PRAT 

是 克 景 重要 教育 之 一 其 中 成 立 于 1669 年 的 萨 格 勒 

和 


8-62 习题 9 对 应 图 (1) 
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侏 罗 纪 海岸 
 EPiEENTE EPENOECHRRER PETER 
亿 3 千 年 的 地 理 史诗 地 区 有 很 多 独一无二 的 地 理 特性 ， 并 


石灰 岩 折 曲 和 被 e TET 
zean D ATAS, 因此 这 里 ; | 考察 
“ 安 于 的 故乡 HES t LEE NAN SEE 
PEXERE. 


石 ， 其 中 甚至 还 有 外: 岸 线 被 联合 国 | 
和 人 称 为 “ 侏 胃 纪 海岸 “， 与 美国 的 科 罗 拉 


利 亚 的 大 保 准 ， 以 及 加 拉 析 玄 斯 群 名 等 一 起 并 列 为 世界 自 
ROR. 


É Ble 71/ /PHWSICS/ PIN SIL SNI C crrraseykis gi 2010 0T OR Q P + 2 Q o A 


8-63 习题 9 对 应 图 (2) 
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口 掌握 模板 的 相关 概念 。 
口 能 够 利用 模板 功能 快速 创建 多 个 页 面 。 
口 理 解 行为 的 基本 概念 ,能 够 为 网 页 添加 简单 的 行为 。 


模板 可 以 理解 为 一 种 模型 ,使 用 该 模型 可 以 方便 地 制作 出 多 个 布局 类 似 而 内 容 不 同 
的 页 面 ; 行为 是 Dreamweaver 具有 的 一 种 功能 ,用 户 可 以 通过 该 功能 实现 多 种 动态 效果 
和 互 交 功 能 ,而 不 用 编写 JavaScript。 本 章 主 要 从 模板 和 行为 两 方面 入 手 配合 CSS 的 使 
用 ,向 读者 介绍 相关 知识 。 


91 模 板 


在 建设 大 型 网 站 时 ,通常 需要 制作 很 多 布局 .风格 和 功能 相似 的 页 面 。 为 了 提高 网 站 
建设 的 效率 ,避免 重复 操作 ,就 要 使 用 Dreamweaver CS5 中 的 模板 功能 。 通 过 模板 创建 
和 更 新 网 页 ,不仅 大 大 提高 工作 效率 ,而 且 也 为 后 期 维护 网 站 提供 方便 。 


9.1.1 模板 的 基本 概念 


表单 域 定义 了 一 个 表单 的 开始 和 结束 。 在 包含 表单 的 页 面 中 ,每 个 表单 都 包括 表单 
域 和 若干 个 表单 对 象 ,所 有 表单 对 象 都 要 放 在 表单 域 中 才 会 生效 。 


1. 模板 


模板 是 一 种 特殊 类 型 的 文档 ,用 于 设计 “固定 的 ”页 面 布局 。 在 创建 基于 模板 创建 文 
档 后 ,创建 的 文档 会 继承 模板 的 页 面 布 局 。 

在 模板 中 有 两 类 区 域 :“ 锁 定 区 域 ” 和 * 可 编辑 区 域 "。 创 建 模板 的 过 程 就 是 指定 和 命 
名 可 编辑 的 区 域 , 当 一 个 文档 从 某 些 模板 中 创建 时 ,可 编辑 的 区 域 就 成 为 唯一 可 以 被 改变 
的 地 方 。 

模板 也 不 是 一 成 不 变 的 ,即使 在 基于 某 个 模板 创建 文档 之 后 ,还 可 以 对 该 模板 进行 修 
改 。 在 更 新 使 用 该 模板 创建 的 文档 时 ,那些 文档 中 对 应 的 内 容 也 会 被 自动 更 新 ,并 与 模板 


的 修改 相 匹配 。 
2. 创建 模板 


在 Dreamweaver CS5 中 可 以 将 现 有 的 网 页 创建 为 模板 ,然后 根据 需要 再 创作 ,或 者 
创建 一 个 空白 模板 ,在 其 中 输入 需要 显示 的 文档 内 容 。 模 板 的 本 质 是 文档 ,其 扩展 名 为 
“. dwt” ,存放 在 根 目录 Templates 文件 夹 内 ,该 文件 夹 并 不 是 原来 就 有 的 ,而 是 在 创建 模 
板 过 程 中 由 软件 自动 生成 的 。 有 两 种 创建 模板 的 方法 ,一 种 是 将 现 有 网 页 另存 为 模板 ; 
另 一 种 是 创建 一 个 空白 模板 。 

(1) 将 现 有 网 页 另存 为 模板 

从 现 有 文档 中 创建 模板 是 实际 工作 中 经 常 使 用 的 处 理 方法 。 

O 在 Dreamweaver CS5 中 打开 已 有 网 页 ,然后 执行 “文件 ”>“ 另 存 为 模板 ”命令 。 此 
时 打开 “另存 为 模板 ”对 话 框 。 

© 在 该 对 话 框 中 的 “站 点 "下 拉 菜 单 中 选择 站 点 名 称 , 在 “另存 为 ”文本 框 中 输入 模板 
名 称 。 最 后 单 击 “ 保 存 ” 按 钮 即 可 保存 为 模板 ,如 图 9-1 所 示 。 更 为 详细 的 参数 设置 在 后 
续 演练 环节 进行 讲解 。 


同 F:\ 数 材 护 写 汇总 \ 前 性 案例 教 程 《2011) 一 一 机 械 \ 苇 大 网 站 \ch04\ 实 吝 \index. htal (XHTML) = 口 X 


站 点 : | ch04 实 训 


字 泽 互联 国际 成 立 于 2001 年 5 月 ， HON. : [GARE 
司 是 一 家 为 企业 提供 网 络 化 和 信息 化 建设 为 主 台 
近 70 人 的 团队 ， 专 业 技术 开发 人 员 近 三 十 人 . 


图 9-1 将 现 有 网 页 另存 为 模板 


(2) 创建 空白 模板 

创建 空白 模板 的 方法 与 创建 普通 页 面 类 似 。 

D 执行 “文件 ”>“ 新 建 " 命 令 ,在 打开 的 “新 建文 档 ”对话 框 中 选择 “ 空 模板 ”选项 。 

© 然后 根据 实际 需要 从 右边 “模板 类 型 ”中 选择 需要 的 模板 ,最 后 单 击 * 创 建 按 钮 即 
可 ,如 图 9-2 所 示 。 
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模板 类 型 
< ASP JavaScript 模板 


SM ， 富 度 以 百分比 表示 ， 带 有 标题 和 


文档 天 型。 [DQWL 10 Tresitisna Ñ 
布局 css 位 置 :而 加 到 文档 ` 
附加 css 文件 - 


[mesto 


图 9-2 创建 空白 模板 


9.1.2 使 用 模板 创建 网 页 


在 实际 工作 中 ,经 常 通过 将 已 有 网 页 文档 另存 为 模板 的 方法 创建 模板 ,在 此 环节 中 需 
要 为 模板 指定 “可 编辑 区 域 *? 和 “不 可 编辑 区 域 ”, 然 后 才 是 基于 该 模板 创建 新 文档 。 当 然 
后 期 还 可 以 将 基于 模板 创建 完成 的 页 面 文档 从 模板 中 分 离 出 来 。 

本 节 从 工作 流程 中 提炼 出 重要 环节 ,以 “前 期 准备 ”>“ 创 建 模板 ”>“ 指 定 可 编辑 区 
域 ">“ 基 于 模板 创建 其 他 页 面 " 这 4 个 工作 重点 为 基础 ,利用 示例 向 读者 详细 介绍 模板 的 
使 用 方法 ,请 读者 仔细 体会 其 整个 创建 过 程 。 

【演练 9-1】 使 用 模板 创建 网 页 。 

(1) 前 期 准备 环节 

O 启动 Dreamweaver CS5 创建 站 点 ,在 站 点 中 创建 “images” 和 “style” 两 个 文件 夹 。 

© 新 建 空白 的 XHTML 文档 和 CSS 文档 ,并 将 其 进行 链接 。 

© 创建 一 个 拟 作为 模板 的 页 面 “page. html”, 

(2) 创建 模板 环节 

O 打开 “page. html” 页 面 ,执行 “文件 ”>“ 另 存 为 模板 "命令 ,打开 “另存 模板 ”对 
话 框 。 

© 在 对 话 框 中 的 “站 点 ”下拉 列表 中 选择 站 点 “模板 示例 ”, 在 “另存 为 "文本 框 中 输入 
模板 名 称 “muban” ,如 图 9-3 所 示 。 单 击 “ 保 存 ” 按 钮 ,将 当前 页 面 *page. html” 保 存 为 用 
于 创建 其 他 页 面 的 模板 。 

此 时 ,系统 自动 在 站 点 根 文件 夹 下 创建 一 个 名 为 Templates 的 文件 夹 ,并 将 创建 的 模 
板 文件 (扩展 名 为 . dwt)muban. dwt 保存 在 该 文件 夹 下 ,如 图 9-4 所 示 。 
190 


< > 
C ÉE sh BN oE 


图 9-3 “另存 模板 ”对 话 框 图 9-4 站 点 中 模板 的 位 置 


(3) 指定 可 编辑 区 域 环节 

创建 模板 之 后 ,根据 实际 要 求 对 模板 中 的 内 容 进 行 编辑 , 即 指定 哪些 内 容 可 以 编辑 ， 
哪些 内 容 不 能 编辑 。 

在 模板 文档 中 ,可 编辑 的 区 域 是 页 面 中 变化 的 部 分 ,如 本 示例 中 侧 边栏 和 内 容 区 域 ; 
不 可 编辑 的 区 域 是 各 页 面 中 相对 保持 不 变 的 部 分 ,如 本 示例 中 的 导航 和 底部 的 版 权 信 息 。 
在 默认 情况 下 ,新 创建 模板 的 所 有 区 域 都 处 于 锁定 区 域 ,因此 ,要 使 用 模板 就 必须 创建 模 
板 的 可 编辑 区 域 ,以 便 在 不 同 页 面 中 输入 不 同 的 内 容 。 

在 编辑 模板 时 ,可 以 修改 可 编辑 区 域 , 也 可 修改 锁定 区 域 。 但 当 该 模板 被 应 用 于 文档 
时 , 则 只 能 修改 文档 可 编辑 区 域 ,文档 锁定 区 域 是 
不 允许 修改 的 。 

O 在 模板 文档 “muban. dwt” 中 选择 左 侧 边栏 
名 为 “left_side” 的 div 容器 。 

© 执行 菜单 栏 中 的 “插入 ”一 “模板 对 象 ”>>“ 可 
编辑 区 域 "命令 ,或 者 按 组 合 键 Ctrl 十 Alt 十 V, 此 时 图 9-5 “新 建 可 编辑 区 域 " 对 话 框 
打开 “新 建 可 编辑 区 域 ” 对 话 框 ,如 图 9-5 所 示 。 在 
该 对 话 框 的 “名 称 ” 文 本 框 中 输入 可 编辑 区 域 的 名 称 *left_side”, 单 击 “ 确 定 ” 按 钮 ,模板 中 
就 建立 了 一 个 可 编辑 区 域 。 

© 同样 的 处 理 办 法 ,选择 页 面 主 内 容 区 域名 为 content_content” 的 div 容器 ,为 该 区 
域 定义 可 编辑 区 域 ,定义 完成 后 的 页 面 效 果 如 图 9-6 所 示 。 

从 图 9-6 中 可 以 看 出 ,可 编辑 区 域 在 模板 中 由 高 亮 显示 的 矩形 边框 围绕 ,区 域 左 上 角 
选项 卡 显示 该 区 域 的 名 称 。 

(4) 基于 模板 创建 新 页 面 

模板 制作 完成 后 , 接 下 来 就 可 以 将 其 应 用 到 网 页 中 。 通 过 这 种 方法 ,能 够 快速 .高效 
地 制作 页 面 , 具 体操 作 如 下 : 

D 执行 “文件 ”>“ 新 建 "命令 ,打开 “新 建文 档 ” 对 话 框 ,选择 “模板 中 的 页 ”选项 卡 , 在 
“站 点 ”列表 中 选择 当前 站 点 下 的 模板 文件 “muban”, 如 图 9-7 所 示 。 单 击 “ 创 建 ” 按 钮 , 即 

191 


新 建 可 编辑 区 域 


W (left_side 


区 页 设计 与 制作 案例 教程 (HTML 二 CSS5+ Dreamweaver) 


EE aves 


s= 


> 


图 9-6 


站 点 "T-7" 的 模板 


L sen 
D sm 
EB ma 
ES ml 页 


W =s 


Ë: B: P Ë Ë e Ë Ë B Ë: EERS 


FJ 5st86223885 sma 


h BERENT g| 
| el > 


图 9-7 基于 模板 新 建文 档 


可 基于 模板 创建 一 个 新 页 面 。 

© 此 时 ,在 新 建 的 页 面 右上 角 显 示 “ 模 板 : muban” 文 字 标 签 , 这 表示 当前 文档 是 基于 
模板 *muban” 而 建立 的 。 

© 将 鼠标 移动 到 锁定 区 域 的 地 方 .鼠标 光标 将 变 成 形状 ,表示 该 区 域 不 可 编辑 ,如 
图 9-8 所 示 。 而 标 有 “left_side”、“content_content” 符 号 的 区 域 则 是 可 编辑 的 区 域 。 

由 在 当前 页 面 可 编辑 区 域 进行 修改 文字 、 插 入 图 片 等 操作 即 可 快速 制作 布局 相似 的 
页 面 。 需 要 注意 的 是 ,不 要 将 模板 文件 移动 到 Templates 文件 夹 之 外 或 者 将 任何 非 模板 
文件 放 在 Templates 文件 夹 中 。 
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9-8 基于 “muban” 模 板 而 创建 的 文档 页 面 


9.1.3 模板 的 管理 

模板 创建 完成 后 ,根据 实际 情况 可 以 随时 更 改 模 板 样式 和 内 容 。 更 新 模板 后 ， 
Dreamweaver CS5 会 对 应 用 模板 的 所 有 网 页 进行 更 新 。 

1. 从 模板 中 分 离 


从 模板 中 分 离 功 能 可 将 当前 文档 从 模板 中 分 离 , 分 离 后 模板 中 的 文档 依然 存在 ,只 是 
原来 不 可 编辑 的 区 域 变 得 可 以 编辑 ,这 给 修改 网 页 内 容 带 来 很 大 的 方便 。 打 开 一 个 基于 
模板 创建 的 文档 ,执行 “修改 >“ 模板 >“ 从 模板 中 分 离 ” 命 令 , 即 可 将 当前 文档 从 模板 中 
分 离 。 


2. 更 新 基于 模板 的 文档 


修改 模板 后 ,Dreamweaver 会 提示 用 户 更 新 基于 该 模板 的 文档 。 可 以 执行 以 下 操作 
之 一 来 更 新 站 点 。 

O 在 文档 编辑 窗口 ,执行 “修改 ”>“ 模 板 ”>“ 更 新 页 面 "命令 ,打开 “更 新 页 面 " 对 话 
框 ,如 图 9-9 所 示 。 根 据 需 要 选择 更 新 站 点 的 所 有 页 面 ,还 是 只 更 新 特定 模板 的 页 面 。 

© 在 “文件 ”面板 的 “资源 ”选项 卡 中 , 单 击 左 侧 分 类 中 的 “模板 ”按钮 ,打开 “模板 ” 面 
板 。 在 模板 上 单 击 鼠 标 右键 ,在 弹出 的 菜单 中 选择 “更 新 站 点 ”, 如 图 9-10 所 示 。 在 打开 
的 “更 新 页 面 " 对 话 框 内 ,根据 需要 进行 设置 即 可 。 
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图 9-9 “更 新 页 面 ?" 对 话 框 图 9-10 利用 “资源 ”面板 更 新 站 点 
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Dreamweaver CS5 中 的 行为 是 将 JavaScript 代码 放置 到 文档 中 ,允许 访问 者 通过 多 
种 方式 更 改 网 页 ,或 者 启动 某 些 任务 ,实现 访问 者 与 Web 页 面 间 的 交互 。 除 了 内 置 的 行 
为 外 ,用 户 可 以 自己 用 JavaScript 编写 行为 ,还 可 以 从 Adobe 公司 和 其 他 第 三 方 的 开发 
网 站 下 载 。 


9.2.1 行为 的 基本 知识 


行为 是 某 个 事件 和 由 该 事件 触发 的 动作 的 组 合 。 在 “行为 ”面板 中 ,可 以 先 指定 一 个 
动作 ,然后 再 指定 触发 该 动作 的 事件 ,以 此 将 行为 添加 到 页 面 中 。 


1. 事件 


事件 是 触发 动态 效果 的 原因 , 它 可 以 被 附加 到 各 种 页 面 元 素 上 ,也 可 以 被 附加 到 
HTML 标记 中 。 例 如 , 当 访 问 者 将 鼠标 指针 移 到 某 个 链接 上 时 ,浏览 器 将 为 该 链接 生成 
一 个 onMouseOver 事件。 不 同 浏览 器 支持 的 事件 种 类 和 数量 不 同 ,一 般 较 高 版 本 的 浏览 
器 能 够 支持 更 多 的 事件 。 


2. 动作 


动作 是 一 段 预先 编写 的 JavaScript 代码 ,是 最 终 需 要 完成 的 动态 效果 。 例 如 ,打开 浏 
览 器 窗口 .弹出 窗口 ,交换 图 像 等 都 是 动作 。 在 将 行为 附加 到 某 个 页 面 元 素 之 后 ,每 当 该 
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元 素 的 某 个 事件 发 生 时 ,行为 即 会 调用 与 这 一 事件 关联 的 动作 (JavaScript 代码 ) 。 

在 Dreamweaver CS5 中 使 用 内 置 行为 ,系统 会 自动 地 向 页 面 添加 JavaScript 代码 ， 

对 于 不 太 熟 悉 JavaScript 的 设计 人 员 非 常 适 合 。 

3. 行为 面板 

在 Dreamweaver CS5 中 ,执行 “窗口 ”>“ 行 为 ”命令 ,或 者 按 Shift 十 F4 组 合 键 , 即 可 
打开 行为 面板 ,如 图 9-11 所 示 。 行为 面板 包含 以 下 选项 。 

° 显示 设置 事件 E 引 : 仅 显 示 附 加 到 当前 文档 中 的 事件 ,每 个 类 别 的 事件 都 包含 在 

可 折 双 的 列表 中 ,如 图 9-12 所 示 。 

ERMA RES: 按 字母 顺序 显示 属于 特定 类 别 的 所 有 事件 。 

。 添加 行为 [+ : 显示 行为 菜单 ,如 图 9-13 所 示 , 其 中 包含 可 以 附加 到 当前 选 定 元 素 
的 动作 。 当 从 该 列表 中 选择 一 个 动作 时 ,将 出 现 一 个 对 话 框 ,用 户 可 以 在 对 话 框 
中 指定 该 动作 的 参数 。 如 果菜 单 上 的 所 有 动作 都 处 于 灰色 禁用 状态 , 则 表示 选 定 
的 元 素 无 法 生成 任何 事件 。 

° 删除 事件 = : 从 行为 列表 中 删除 所 选 的 事件 和 动作 。 

。 向 上 箭头 < 和 向 下 箭头 v : 在 行为 列表 中 上 下 移动 特定 事件 的 选 定 动作 。 对 
于 不 能 在 列表 中 上 下 移动 的 动作 ,箭头 按钮 将 处 于 禁用 状态 。 
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9.2.2 应 用 行为 

Dreamweaver CS5 内 置 了 多 种 行为 ,让 设计 者 无 须 掌 握 JavaScript 语言 ,就 能 够 制作 
出 互动 图 像 .快捷 菜单 等 特殊 效果 ,这 使 得 访问 者 与 网 页 之 间 更 具有 交互 性 。 

1. 应 用 “打开 浏览 器 窗口 "行为 


使 用 该 行为 可 以 在 一 个 新 的 窗口 中 打开 页 面 , 这 个 窗口 的 属性 由 设计 者 进行 设置 ,如 
窗口 大 小 是否 有 状态 栏 以 及 窗口 名 称 等 。 
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【演练 9-2】 打开 浏览 器 窗口 行为 。 

这 里 制作 一 个 随 主页 打开 而 自动 打开 的 广告 窗口 页 面 ,具体 操作 如 下 : 

O 首先 制作 弹出 的 广告 窗口 。 在 Dreamweaver CS5 中 ,新 建 空白 页 面 ,插入 用 于 播 
放 广 告 的 Flash 文件 并 保存 为 “ad. html”, 

@ 再 创建 一 个 空白 页 面 , 输 入 相关 内 容 ,作为 站 点 主页 ,保存 为 index. html。 在 该 页 
面 中 ,选择 页 面 标签 二 body 二 , 即 选中 整个 页 面 主体 。 然 后 , 单 击 * 行 为 面板 上 的 [zj 按 
钮 ,在 弹出 的 下 拉 菜 单 中 ,选择 “打开 浏览 器 窗口 ”选项 ,弹出 “打开 浏览 器 窗口 ”对 话 框 。 

© 在 “打开 浏览 器 窗口 "对话 框 中 , 单 击 “ 浏 览 ” 按 钮 ,在 弹出 对 话 框 内 选择 刚才 创建 
的 广告 窗口 页 面 ad. html。 根 据 需 要 设置 窗口 宽度 和 高 度 , 并 选中 相应 的 属性 ,如 图 9-14 
所 示 。 

需要 说 明 的 是 ,广告 窗口 一 般 用 来 显示 一 些 公告 信息 ,因此 在 设置 广告 窗口 的 参数 时 
不 必 为 该 窗口 页 面 设置 导航 工具 栏 .菜单 条 等 选项 ,一 般 只 需 设 置 “需要 时 使 用 滚动 条 ” 选 
项 即 可 。 

@ 设置 完成 后 , 单 击 “ 确 定 ” 按 钮 ,此 时 在 “行为 "面板 中 会 自动 添加 一 个 加 载 页面 的 
onLoad 事件 ,如 图 9-15 所 示 。 
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图 9-14 设置 广告 窗口 相应 的 参数 图 9-15 添加 的 onLoad 事件 


© 保存 当前 文档 ,使 用 浏览 器 预览 。 当 打开 主页 时 ,广告 页 面 会 在 另 一 浏览 器 窗口 
随 着 主页 的 打开 而 打开 ,如 图 9-16 所 示 。 
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9-16 ”打开 浏览 器 窗口 行为 预览 效果 


2. 应 用 “弹出 信息 ”行为 


“弹出 消息 ”行为 用 于 弹出 一 个 包含 指定 消息 的 JavaScript 警告 。 因 为 JavaScript #£ 
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第 9 章 网 页 元 素 一 一 模板 与 行为 

告 对 话 框 只 有 一 个 “确定 ”按钮 ,所 以 使 用 这 个 行为 只 能 提供 用 户 信息 ,但 不 能 为 用 户 提供 
选择 操作 。 弹 出 信息 一 般 有 两 种 形式 ,一 种 是 打开 网 页 后 自动 弹出 信息 对 话 框 , 另 一 种 是 
通过 单 击 某 个 对 象 弹出 对 话 框 。 

【演练 9-3】 弹出 信息 行为 。 

O 若 要 给 网 页 添加 “弹出 消息 ”行为 , 则 应 选中 整个 页 面 ; 车 要 给 某 个 对 象 添加 “ 弹 
出 消息 行为 , 则 应 选中 这 个 对 象 。 这 里 选中 页 面 内 的 图 片 对 象 ,为 图 像 添加 行为 。 

© 选中 图 像 后 , 单 击 “ 行 为 "面板 上 的 [二 按钮 ,在 弹出 的 下 拉 菜 单 中 ,选择 * 弹 出 消 
息 ” 选 项 ,此 时 弹出 如 图 9-17 所 示 的 对 话 框 。 

© 在 此 对 话 框 中 ,输入 弹出 信息 的 文本 内 容 , 这 时 在 “行为 ”面板 中 会 自动 添加 一 个 
onClick 事件 。 此 外 ,根据 实际 需要 还 可 以 在 事件 选择 下 拉 列 表 中 选择 其 他 事件 ,如 图 9-18 
所 示 。 


图 9-17 “弹出 消息 ”对 话 框 图 9-18 添加 onClick 事件 


D 执行 “文件 ”>“ 保 存 " 命 令 , 保 存 当 前 页 面 , 按 F12 键 预 览 网 页 。 当 单 击 页 面 中 的 
图 像 时 , 即 会 弹出 对 话 框 ,如 图 9-19 所 示 。 


pyri 
GO [e rvnuiwscCe SEP Cu —UdPEPMu ao Pp N v O X | 上 


ABRE 入 弹出 信息 行为 


图 9-19 应 用 弹出 信息 行为 效果 


3. 应 用 “交换 图 像 ” 行 为 


“交换 图 像 ” 行 为 通过 更 改 二 img 二 标签 的 src 属性 将 一 个 图 像 和 另 一 个 图 像 进行 交 
换 。 使 用 此 行为 可 创建 鼠标 经 过 按钮 的 效果 以 及 其 他 图 像 效 果 。 插 入 鼠标 经 过 图 像 会 自 
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动 将 一 个 “交换 图 像 ” 行 为 添加 到 页 面 中 。 

【演练 9-4】 交换 图 像 行为 。 

O 新 建 空白 页 面 ,并 向 页 面 中 添加 一 幅 图 像 。 

© 选中 该 图 像 ,然后 执行 “窗口 >“ 行为 "命令, 打开“ 行为” 面板。 在 “行为 ”面板 中 ， 
单 击 “ 添 加 行为 ”按钮 [+J ,在 弹出 菜单 中 选择 “交换 图 像 ” 选 项 ,打开 “交换 图 像 "对 话 框 。 

© 在 此 对 话 框 中 ,“ 图 像 * 文 本 框 内 显示 的 是 当前 页 面 中 所 有 的 图 像 , 单 击 “ 浏 览 ” 按 
钮 选择 图 像 源 ,如 图 9-20 所 示 。 


设 定 原始 档 为 : |210.png 
Fl mee A mie 
加 Bsiparartys mie 


9-20 “交换 图 像 " 对 话 框 


@ 选中 “预先 载 入 图像 " 复 选 框 ,可 以 在 加 载 页 面 时 对 新 图 像 进行 缓存 ,防止 图 像 由 
于 下 载 原因 导致 显示 延迟 。 选 中 “鼠标 滑 开 时 恢复 图 像 * 复 选 框 ,可 以 使 其 恢复 到 以 前 的 
图 像 源 。 设 置 完成 后 , 单 击 “ 确 定 ” 按 钮 。 

© 保存 当前 页 面 ,在 浏览 器 中 预览 ,将 鼠标 滑 入 图 像 区 域 时 即 可 看 到 变化 效果 ,如 
图 9-21 和 图 9-22 所 示 。 


全 交 找 图 像 行为 - vi... PS 信 交 换 图 像 行为 - vi... DOR 
GO [ErWan GO [e rMnBGsrsui sv 
文件 也) RED FEV 收藏 ; ” 文件 ED REU FEV BW” 


ARAR ELADETN AER ØLADPIH 


图 9-21 交换 图 像 (1) 图 9-22 交换 图 像 (2) 


4. 应 用 “改变 属性 ”行为 


“改变 属性 ”行为 可 更 改 对 象 某 个 属性 的 值 , 例 如 改变 div 容器 的 背景 颜色 、 表 格 的 背 
198 


第 9 章 网 页 元 素 一 一 模板 与 行为 


景 颜色 或 图 像 等 。 一 般 使 用 行为 改变 属性 的 种 类 取决 于 附加 动作 的 对 象 和 浏览 器 的 类 
型 ,如 果 要 使 用 行为 来 改变 元 素 的 属性 ,最 好 对 HTML 和 JavaScript 有 较 深 入 的 了 解 。 
这 里 以 利用 “改变 属性 ”行为 向 表格 添加 背景 颜色 为 例 , 讲 述 添加 该 行为 的 方法 。 

【演练 9-5】 改变 属性 行为 。 

O 新 建 空白 页 面 ,在 其 中 插入 5 $T 2 列 的 表格 ,并 将 “间距 ”设置 为 1,“ 边 框 "设置 为 1。 

O 根据 需要 向 表格 中 输入 文字 内 容 。 选 择 表 格 的 第 一 行 , 在 “属性 ”面板 中 ,将 此 行 的 
ID 设置 为 “tr_ 01”, 如 图 9-23 所 示 。 同 样 的 操作 ,将 表格 其 他 行 的 ID 依次 设置 为 "tr_02”、 
“tr 03” “tr 04?、“tr 05”, 


个 ntitled-s Cama* 

1 _ 使 用 改变 属性 "行为 可 更 改 对 象 某 个 属性 的 值 
2 _ 使 用 "改变 属性 "行为 可 更 改 对 象 某 个 属性 的 值 
3 “使 用 "改变 属性 "行为 可 更 改 对 象 某 个 属性 的 值 
4 ”使 用 "改变 属性 行为 可 更 改 对 象 某 个 属性 的 值 


5 ”使 用 "改变 属性 ”行为 可 更 改 对 象 某 个 属性 的 值 总 
Dody? <table Ktrëtr O15 

属性 
[<>] BRD x gi 类 | 无 | 

B css ma eo | 链接 WD | $0 


到 行 xro v mo | +AGO[] Wwe, rN] 
— ma sopu vao) |] #800 


9-23 设置 表格 行 的 ID 


@ 选择 表格 的 第 一 行 , 单 击 “ 行 为 "面板 上 的 [区 按钮 ,在 弹出 下 拉 菜 单 中 ,选择 “改变 
属性 ”选项 ,弹出 “改变 属性 ”对 话 框 。 

@ 在 此 对 话 框 的 “元 素 类 型 "下 拉 菜 单 中 选择 TR” 选项, 在“ 元素 ID? 下 拉 菜 单 中 选 
择 “tr_01” 选 项 ,在 “属性 ”下拉 菜 单 中 选择 “backgroundColor” 选 项 ,在 “新 的 值 ” 文 本 框 中 
输入 “#FFCC33”, 如 图 9-24 所 示 。 单 击 “ 确 定 ” 按 钮 ,在 “行为 ”面板 中 会 自动 添加 一 个 
onFocus 事件 。 最 后 在 事件 选择 下 拉 列 表 中 修改 onFocus 事件 为 onMouseOver 事件 ,如 
图 9-25 所 示 。 


: [72 


EE 


: © if: |backgroundColor 


Osa | 
: [#FFcc33 


图 9-24 “改变 属性 ”对 话 框 图 9-25 ”onMouseOver 事件 


© 重复 步 又 田 的 操作 ,将 背景 颜色 改 为 " 井 FFFFFF”, 添 加 一 个 onMouseOnut 事件 ， 


如 图 9-26 所 示 。 
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@ 重复 步骤 加 至 步骤 @ 的 操作 ,将 其 他 行进 行 相同 的 设置 。 执 行 “文件 ”>“ 保 存 ” 命 
< ,保存 当前 页 面 , 按 F12 键 预览 网 页 。 当 鼠标 划 过 表格 的 每 一 行 时 , 均 有 橘 黄色 背景 出 
现 , 当 鼠 标 移 开 表格 时 ,表格 背景 又 恢复 为 白色 ,如 图 9-27 所 示 。 


标签 检查 器 
属性 [行为 | 标签 《tr> 
(|.- 7 "` C x @ x HB (@ (D =ç -][@- 
NA S SERE asmens | 
和- 便 用 “改变 属性 “行为 可 更 改 对 象 某 个 属性 的 值 
用 “改变 属性 ”行为 可 更 改 对 象 某 个 属性 的 值 
[使 用 “改变 属性 ”行为 可 更 改 对 象 某 个 属性 的 值 
[使 用 “改变 属性 ”行为 可 更 改 对 象 某 个 属性 的 什 
[使 用 “改变 属性 ”行为 可 更 改 对 象 菜 个 属性 的 什 
== EEEE 
图 9-26 onMouseOut 事件 9-27 改变 属性 行为 效果 


5. 应 用 “显示 一 隐藏 元 素 ” 行 为 


“显示 一 隐藏 元 素 ” 行 为 可 显示 、 隐 藏 ,恢复 一 个 或 多 个 页 面 元 素 的 可 见 性 属性 。 此 
行为 用 于 在 用 户 与 页 进行 交互 时 显示 信息 ,例如 当 鼠 标 悬 停 在 某 个 图 像 或 文字 链接 上 
时 ,就 会 显示 出 一 句 或 一 段 话 , 作 为 提示 用 户 的 信息 ,能 够 起 到 很 好 的 引导 作用 。 这 里 
以 利用 “显示 一 隐藏 元 素 ” 行 为 向 表单 中 添加 用 户 辅助 信息 为 例 ,讲述 添加 该 行为 的 
方法 。 

【演练 9-6】 显示 一 隐藏 元 素 行为 。 

O 新 建 空白 网 页 ,在 其 中 插入 两 个 单行 文本 域 ,如 图 9-28 所 示 。 这 两 个 文本 输入 框 
的 名 称 分 别 设置 为 userName 和 password, 

© 在 “插入 "面板 “布局 ”类别 中 , 单 击 “ 绘 制 AP Div" 按 钮 篇 ,在 页 面 中 绘制 一 个 容 
器 ,用 于 放置 提示 信息 ,如 图 9-29 所 示 。 


D.. RRRS VESANFA\ETARART A. hta! (ITL) z0% 


B... 行为 \ 呈 示 - 隐 基 元 素 行为 .htal (uma) -OX 


body) KdivëanDi v1} [RIQ ix Q dx 172. 2K/ 1 


图 9-28 创建 两 个 单行 文本 域 图 9-29 绘制 AP Div 


© 切换 到 当前 页 面 的 代码 视图 中 ,在 页 面 中 编写 CSS 样式 ,用 于 美化 AP Div 容器 ， 
具体 内 容 如 图 9-30 所 示 。 将 此 规则 应 用 在 之 前 绘制 的 AP Div 容器 上 ,并 进行 位 置 的 调 
整 , 效 果 如 图 9-31 所 示 。 
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vtitieds (ane) PEE 


„apdivi 
background: #FF6; 
color:#F00; 
border:1px solid #F00; 
font-size:12px; 
padding:2px; = 

i hoayy [WI Q 100 visas x 108v 2 K / 1 Ë Unicode OTF 


图 9-30 创建 apdiv 类 CSS 规则 图 9-31 美化 AP Div 容器 


eT, RT, FT | | 


A ] ; 


@ 选择 名 为 userName 的 单行 文本 域 , 单 击 “行为 "面板 上 的 [4#J 按 钮 ,在 弹出 的 下 拉 
菜单 中 ,选择 “显示 一 隐藏 元 素 ” 选 项 ,弹出 “显示 一 隐藏 元 素 ” 对 话 框 。 

© 在 该 对 话 框 的 “元 素 ” 列 表 中 选择 要 显示 或 隐藏 的 元 素 , 这 里 选择 apDivl 元 素 , 单 
击 “ 显 示 ” 按 钮 ,然后 单 击 “ 确 定 ” 按 钮 ,如 图 9-32 所 示 。 这 时 在 “行为 ”面板 中 会 自动 添加 
一 个 onFocus 事件 (事件 在 对 象 获得 焦点 时 发 生 ) 。 

© 再 次 选择 名 为 userName 的 单行 文本 域 ,重复 步骤 @@。 在 打开 的 “显示 一 隐藏 元 
素 ” 对 话 框 中 ,选择 apDivl JGZ ,并 单 击 “隐藏 "按钮 ,最 后 单 击 “ 确 定 ” 按 钮 , 即 可 再 次 添加 
一 个 行为 。 在 事件 选择 下 拉 列 表 中 选择 onBlur 事件 (事件 会 在 对 象 失 去 焦点 时 发 生 ) ,这 
时 “行为 ”面板 中 已 包含 两 个 行为 ,如 图 9-33 所 示 。 


显示 -隐藏 元 素 


属性 | 行为 | 标签 Gaga 
=e] <. Iia 


onBlur EL2 L sd 


~ S ESPERE 


图 9-32 “显示 一 隐藏 元 素 ” 对 话 框 9-33 ”添加 onBlur 事件 


@ 在 页 面 中 选择 apDivl 元 素 , 并 将 其 “可 见 性 ”属性 设置 为 hidden, IP 9-34 所 示 。 

@ 仿照 步骤 @ 至 步骤 @ 的 方法 ,为 password 单行 文本 域 添 加 行为 。 最 后 ,在 浏览 器 
中 预览 , 当 “ 账 号 "文本 框 获得 焦点 时 ,后 方 显 示 提 示 信 息 ; 当 “ 密 码 ” 文 本 框 获得 焦点 时 ， 
后 方 显示 提示 信息 ,如 图 9-35 所 示 。 


ES: 
密码 [ 


GO remsacewit x | 
xe SAD FEV HAW IAD 帮助) 
RRR Ø ITARIRTN -D O- mmv- 


a i [NA LLA LALLE Wi 
Bet 

ag STER EV 20: mO 20 MO 请 最 回潮 GD) 
<l [soin v| ED Cs QO ix MMO a 本 O 
as v 92 a 


Er FEAET. 


PES FERETE 


图 9-34 设置 apDivl 的 可 见 性 属性 图 9-35 显示 一 隐藏 元 素 行 为 效果 
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93 商用 案例 一 公司 类 网 站 的 设计 与 制作 


在 商业 的 网 站 建设 中 ,最 为 常见 的 莫 过 于 公司 类 网 站 ,此 类 网 站 一 般 包含 主页 和 显示 
详细 信息 的 二 级 子 页 面 ,本 节 以 公司 类 网 站 为 例 向 读者 介绍 设计 与 实现 的 整个 过 程 。 


9.3.1 布局 分 析 


通过 对 实际 任务 的 理解 ,本 节 需 要 完成 的 页 面 最 终 效果 如 图 9-36 和 图 9-37 所 示 。 
从 页 面 整 个 布局 来 看 ,页 面 采用 自 适应 宽度 布局 手法 ,定位 美观 大 气 , 符 合 公司 类 网 站 设 
计 风格 。 主 页 页 面 大 致 分 为 头 部 banner 区 域 .主体 区 域 .合作 伙伴 和 版 权 区 域 ; 二 级 页 
面 除 了 与 主页 相同 的 部 分 以 外 ,还 有 左 侧 导航 和 主体 内 容 区 域 。 


FIIBAS taR 4( 1234 


Hil seme 


mm AMEN spo Maas grea atm emat 


= cc "P WIB 2 m 


mz 
合作 伙伴 


22 s coopadms Hisense Meowen GiONEESL OPPO 


图 9-36 ”主页 效果 图 


在 制作 过 程 中 , 拟 采用 无 序列 表 实 现 横向 和 纵向 导航 , 拟 采 用 无 序列 表 实 现 新 闻 板 块 
布局 , 拟 采用 表格 实现 二 级 页 面 中 主体 内 容 区 域 。 通 过 深思 熟 虑 ,页 面 布局 示意 图 如 
图 9-38 和 图 9-39 所 示 。 
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TE 


图 9-37 二 级 页 面 效果 图 


top top 

header header 

banner banner 
banner_down banner_down 

content content 

pro about news leftsiderbar 
right_content 
hezuo 
footer footer 
图 9-38 主页 布局 示意 图 图 9-39 二 级 页 面 布局 示意 图 


9.3.2 制作 过 程 


1. 前 期 准备 工作 


O 启动 Dreamweaver CS5 ,在 软件 菜单 栏 中 执行 “站 点 ”>“ 新 建站 点 ”命令 ,在 弹出 
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的 对 话 框 中 设置 站 点 名 称 及 路 径 。 

© 在 站 点 中 创建 images 和 style 两 个 文件 夹 。 

© Æ Dreamweaver CS5 的 菜单 栏 中 执行 “文件 ”>* 新 建 命 令 , 创 建 一 个 空白 文档 ， 
并 命名 为 index. html。 

@ 创建 一 个 外 部 CSS 样式 表 文 件 , 将 这 个 CSS 文件 保存 在 站 点 的 style 文件 夹 下 ， 
并 命名 为 div. css。 

© 在 Dreamweaver CS5 的 “CSS 样式 ?面板 中 , 单 击 * 附 加 样式 表 ” 按 钮 甸 ,弹出 “ 链 
接 外 部 样式 表 ” 对 话 框 ,将 之 前 创建 的 div. css 外 部 样式 文件 链接 到 index. html 页 面 中 。 


2. 主页 头 部 区 域 的 制作 


O 切换 到 div. css 文件 中 ,创建 页 面 初始 化 CSS 规则 ,如 图 9-40 所 示 。 切 换 回 设计 
页 面 ,将 光标 置 于 “设计 ”视图 中 ,在 “插入 ”面板 的 “常用 ”选项 卡 中 单 击 “ 择 入 Div 标签 ” 按 
钮 ,弹出 “插入 Div 标签 "对话 框 ,在 “插入 ”下 拉 菜 单 中 选择 “在 插入 点 "选项 ,在 “ID” 下 拉 
列表 框 中 输入 top, 最 后 单 击 “ 确 定 ” 按 钮 , 即 可 在 页 面 中 插入 top 容器 。 

© 在 top 容器 内 部 插入 名 为 welcome 的 div 容器 ,并 在 其 中 输入 相关 文字 内 容 ,页面 
结构 如 图 9-41 所 示 。 切 换 到 div. css 文件 中 ,创建 系列 CSS 规则 ,如 图 9-42 所 示 。 


body, ul, ol, 1i, hl, h2 h5, 

h6, dl, dt, dd, input, p 
font-family: "微软 雅 黑 " 

Verdana, sans-serif; 
font-size:12px; 
margin:0; 
padding: 0; 
list-style:none; 
color: #7c7?c?c 

) 

a { 
text-decoration:none; 
color:#7c7c7c; 

) 

a:hover [ 
text-decoration:underline; 
color:#c51919; 

} 

img ( 


border: 0; 
display:block; 
} <body> 
.clear { <div id="top"> 
clear:both; <div id="wellcome"> 欢 迎 访问 宇 泽 互 联网 络 <span> 全 国 统一 
height :Opx; 客服 ”400-123-1234</span></div> 
line-height :Opx; </div> 
) </body> 
9-40 CSS 初始 化 规则 9-41 页面 结 构 (1) 


O 将 光标 置 于 “设计 ”视图 中 ,在 “插入 ”面板 的 “常用 ”选项 卡 中 单 击 “ 插 入 Div 标签 ” 
按钮 ,弹出 “插入 Div 标签 "对话 框 ,在 “插入 ”下 拉 菜 单 中 选择 “在 标签 之 后 ”选项 ,并 在 其 
后 方 下 拉 菜 单 中 选择 “二 div id= "top" 二 ”选项 ,在 ID 下 拉 列 表 框 中 输入 header, 最 后 单 
击 “ 确 定 ” 按 钮 , 即 可 在 top 容器 后 面 插入 header 容器 。 

@ 在 header 容器 内 部 插入 名 为 header_con 的 div 容器 ,并 在 该 容器 内 部 插入 名 为 
logo 的 div 容器 ,其 结构 如 图 9-43 所 示 。 切 换 到 div. css 文件 中 ,创建 CSS 规则 ,如 图 9-44 
所 示 。 
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#header ( 
width:100%; 
#top { height:72px; 
width:100%; background: 
height:42px; url(../images/header bg.gif) 
background: repeat-x left top; 
url(../images/top_bg.gif) 1 


repeat-x left to _con 

) width:1000px; 

#wellcome ( height:72px; 
width:900px; margin:0 auto; 
height:42px; 
margin:0 auto; 
line-height :42px; 


<body> } 
#10go 


font-size:14px; 
overflow:hidden; 
} 
wellcome span ( 


</div> 
<div id="header"> 
<div id="header_con"> 
<div id="logo"></div> 


width:173px; 
height: 63px; 
background: 
url (. ./images/logo.png) 
no-repeat; 


</div> float:left; 
: </div> margin-left:20px; 
) </body> ) 


9-42 CSS 规则 (1) 9-43 页 面 结构 (2) 图 9-44 CSS 规则 (2) 


© 在 logo 容器 后 面 插入 nav 容器 ,并 在 该 容器 内 部 使 用 无 序列 表 创建 导航 ,其 结构 
如 图 9-45 所 示 。 切 换 到 div. css 文件 中 ,创建 CSS 规则 ,如 图 9-46 和 图 9-47 所 示 。 


#nav li a [ 
display:block; 
width:100px; 
height :35px; 
font-size:14px; 
color:#000; 


<div id="header"> 
eader_con"> 
ogo"></div> 


#nav ( ) 
width: 700px; #nav li a:hover { 
height:35px; text-decoration:none; 
float:right; color:#fff; 
margin-top:37px; background: 
display:inline; url (images/nav_bg.gif) 
no-repeat center; 
#nav li } 
width:100px; 
height:35px; 
float:left; 
line-height: 35px; 
text-align:center; 
</div> } ) 


9-45 页 面 结构 (3) 


"class="on"> 首 页 </a></1i> 
href="#"> 公 司 简介 </a></1i> 

href="#"> 产 品 中 心 </a></1i> } 
新 闻 动态 </a></1i> 
> 生产 车 间 </a></1i> 
href="#"> 在 线 订单 </a></1i> 
href="#"> 合 作 治 谈 </a></1i> 


#nav li a.on í 
background: 

url(images/nav_bg.gif) 

no-repeat center; 
color:#fff; 


9-46 CSS 规则 (3) 9-47 CSS 规则 (4) 


© 保存 当前 文档 ,通过 浏览 器 预览 可 以 看 到 效果 ,如 图 9-48 所 示 。 


无 标题 六 档 


[全 TERTIAE 
ET 


emas mara 2-0 


mpu Swa, 


+s 400-123-1234 


9-48 ”预览 效果 (1) 


3. banner 区 域 的 制作 


O 在 header 容器 后 面 插入 名 为 banner 的 div 容器 ,并 在 该 容器 内 部 插入 名 为 banner_ 
con 的 div 容器 。 
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© 在 banner_con 容器 内 部 插入 一 幅 图 像 ,用 于 banner 的 美化 。 
© 在 banner_con 容器 后 面 插入 名 为 banner_down 的 div 容器 ,具体 页 面 结构 如 
图 9-49 所 示 。 切 换 到 div. css 文件 中 ,创建 CSS 规则 ,如 图 9-50 所 示 。 


<div id=" "header"> 
[edv 3 
</div> 
<div id="banner"> 


<div id="banner con"><img src="images/banner_03.jpg" 


width="920" height="263" /></div> 
</div> 
<div id="banner down"></div> 


图 9-49 页 面 结构 (4) 


#banner ( 
width:100%; 
height:290px; 
background: 

url(../images/banner_bg.gif) repeat-x; 
padding-top: lpx; 


#banner_con { 
width: 985px; 
height:290px; 
margin:0 auto; 
padding:10px 0 0 15px; 


#banner_con img { 
border:4px #FFF solid; 


#banner_down { 

width:100%; 

height:30px; 

background: 
url(../images/banner_down_bg.gif) 
repeat-x; 


9-50 CSS 规则 (5) 


图 保存 当前 文档 ,通过 浏览 器 预览 可 以 看 到 效果 ,如 图 9-51 所 示 。 


P! PMGSICE SEP C 2011 ) — AEEA aa AEE rra" FIA x <“ 


RED PTV PRAW IAD upo 


a- 3 @ - Tav- 220- IAV- @- 


图 9-51 


4. 主体 区 域 的 制作 


ERR 400-123-1234 


预览 效果 (2) 


Q 将 光标 置 于 “设计 ”视图 中 ,在 “插入 ”面板 的 “常用 ”选项 卡 中 单 击 “ 插 入 Div 标签 ” 
按钮 ,弹出 “插入 Div 标签 "对话 框 ,在 “插入 ”下 拉 菜 单 中 选择 “在 标签 之 后 ”选项 ,并 在 其 
后 方 下 拉 菜 单 中 选择 “二 div id= "banner_down" >” M, Æ ID 下 拉 列 表 框 中 输入 
content, 最 后 单 击 “ 确 定 ” 按 钮 , 即 可 在 banner_down 容器 后 面 插入 content 容器 。 

@ 在 content 容器 内 部 插入 名 为 pro 的 div 容器 ,并 在 该 容器 内 部 使 用 无 序列 表 创 建 
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内 容 , 其 页 面 结构 如 图 9-52 所 示 。 

© 切换 到 div. css 文件 中 ,创建 Css H 
则 ,如 图 9-53 所 示 。 保 存 当前 文档 ,通过 浏览 
器 预览 可 以 看 到 效果 ,如 图 9-54 所 示 。 

@ 在 pro 容器 内 部 插入 名 为 about 的 div 
容器 ,并 在 该 容器 内 部 插入 about_con 容器 ,以 
及 相关 文字 内 容 ,其 页 面 结构 如 图 9-55 所 示 。 


#content { 
width:940px; 
margin:0 auto; 

} 

#pro { 
width:300px; 
float:left; 
margin-right:10px; 
background: 

url(-./images/pro_bg.jpg) 

no-repeat center top; 

} 

#pro ul 

width:260px; 

height:128px; 
margin-top:130px; 
margin-left:20px; 

} 

#pro ul li ( 
width:260px; 
height: 32px; 
line-height:32px; 
background: 

url(../images/icon.gif) 

no-repeat left center; 
text-indent:28px; 
border-bottom:lpx dashed 

#7c7c7c; 

} 


图 9-53 CSS 规则 (6) 


<div id="content"> 
<div id="pro"> 
ES 
</div> 
<div id= 


about"> 


<div id="banner down"></div> 
<div id="content"> 
<div id="pro"> 
<ul> 
<li><a href="#">3100 系 列 电磁 开关 </a></1i> 
<li><a href="#">7000 系 列 电磁 开关 </a></1i> 
<li><a href="#">6100 系 列 电磁 开关 </a></1i> 
<li><a href="#">5900 系 列 电磁 开关 </a></1i> 
</ul> 
</div> 
</div> 


图 9-52 页 面 结构 (5) 


O 无 标题 文档 一 


Tindovs Intern... DER) 


GƏ- remsce'i|t x |£ 
XD SEOD FFEV KAW IAD” 
RRRR GET 


9-54 ”预览 效果 (3) 


<div id="about_con [FREAR :|<span class="red"> 
<a href="#">[ 了 解 更 多 ]</a></span></div> 


</div> 
</div> 


9-55 ”页面 结构 (6) 


© 切换 到 div. css 文件 中 ,创建 CSS 规则 ， 


器 预览 可 以 看 到 效果 ,如 图 9-57 所 示 。 


如 图 9-56 所 示 。 保 存 当 前 文档 ,通过 浏览 


© 在 about 容器 后 面 插入 名 为 news 的 div 容器 ,并 在 该 容器 内 部 使 用 无 序列 表 创 建 


内 容 , 其 页 面 结构 如 图 9-58 所 示 。 


© 切换 到 div. css 文件 中 ,创建 CSS 规则 ， 


器 预览 可 以 看 到 效果 ,如 图 9-60 所 示 。 


如 图 9-59 所 示 。 保 存 当 前 文档 ,通过 浏览 


由 于 在 实现 主体 区 域 的 布局 时 ,部 分 div 容器 使 用 了 浮动 属性 ,为 了 使 后 续 制 作 
不 受 浮动 的 影响 ,需要 清除 浮动 属性 。 这 里 采用 插入 应 用 “clear” 类 的 div 容器 模式 清除 
浮动 ,在 content 容器 后 面 插入 该 div 容器 即 可 ,结构 如 图 9-61 所 示 。 
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#news { 
width:3 
float: 
backgro 

url(.. 

no-repeat; 

} 

#news ul ( 
width:3 
margin 

} 

#news ul li 
height: 
line-he 
backgro 

url(.. 

no-repeat 1 


text-indent:20px; 


} 


9-59 
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/images/news_bg.jpg) 


-top:135px; 


/images/icon1.gif) 


无 标题 文档 - Windows Interne. 


[e ramase v + x [D : 


s0 查看 


BERW IAV ” 


xem 


8 


SIS] 
#about { 文件 四 
width:300px; k ERR 
float:left; 
margin-right :50px; 
background: 


url(../images/about_bg.jpg) 

no-repeat center top; 
margin-right:10px; 

} 

#about_ con { 
width:285px; 
text-indent:2em; 
margin:0 auto; 
margin-top:135px; 
line-height:1.5; 

} 

span.red a { 
color: #a61002; 
margin-left:197px; 


n.red a:hover { 
color:#d5le0d7 


TEES] 


图 9-56 CSS 规则 (7) 


<div id="about"> 
<div i 
</div> 
<div id="news"> 
<ul> 
<li><a 
<li><a 
<li><a 
<li><a 
<li><a 
</ul> 


#"> 美 如 彩虹 拍 雪 : 


href="#"> 志 远 ， 汽车 电器 的 未 来 发 展 动向 </a></1i> 
轶 龙 c3 毕 加 案 </a></1i> 
#"> 个 子 小 力气 足 ! 你 所 忽视 的 大 马 小 车 </a></1i> 


href="#"> 全 国 工商 联 汽车 摩托 车 配件 订购 会 在 上 海 举行 </a></1i> 


Rioo% 


9-57 HAARA) 


<span class="red"><a href="#">[ 更 多 资讯 ] </a></span> </div> 


9-58 ”页 面 结构 (7) 


无 标题 文档 - Windows Internet... 


[e rnn@sceovunv o x [P 


IRD 


REV FEV WQ 
Ermar 
00px; 
left; 
und: 


00px; 


{ 
23px; 
ight:23px; 
und: 


eft center; 


CSS 规则 (8) 


图 9-60 


预览 效果 (5) 


content"> 


</div> 
<div class="clear"></div> 


图 9-61 清除 浮动 


第 9 章 网 页 元 素 一 一 模板 与 行为 


5. 合作 区 域 的 制作 


(D 将 鼠标 光标 定位 在 图 9-61 中 “二 div class 王 "clear" 二 一 /div 二 ”的 后 面 , 在 当前 位 


置 插 入 名 为 hezuo 的 div 容器 。 


© 在 该 容器 内 部 插入 标题 .rollBox 容器 和 图 像 , 具 体 页 面 结构 如 图 9-62 所 示 o 


<div class="clear"></div> 
<div id="hezuo"> 
<h2></h2> 
<div id="rollBox"> 
<ul> 
<li><a href 


<li><a href="#"><ing sr 
<li><a href="#"><img sr 
<li><a href-"#"><img sr 


</ul> 
</div> 

</div> 

<div class="clear"></div> 


"#"><ing src="images/logo01. 
mimages/logo02. 
"images/10g003. 
"images/logo04_ 
"images/logo05_ 
<li><a href="#"><img src="images/logo06[_ 


jpg" 
jpg" 
jpa” 
jpg" 
jpa" 
jpg" 


/></a></1i> 
height="68" /></a></1i> 
height="68" /></a></li> 
width="138" height="68" /></a></1i> 
width="138" height="68" /></a></li> 
width="138" height="68" /></a></li> 


width="138" 


9-62 页 面 结构 (8) 


@ 切换 到 div. css 文件 中 ,创建 CSS 规则 ,如 图 9-63 和 图 9-64 所 示 。 保 存 当 前 文 


档 , 通 过 浏览 器 预览 可 以 看 到 效果 。 


#hezuo ( 
width:930px; 
height:100px; 
margin:0 auto; 
margin-top:20px; 

} 

#hezuo h2 { 
width:910px; 
height:17px; 
background: 

url(../images/hz.gif) no-repeat 

left center; 

} 

#rollBox { 
background-color: #fff; 
border:1px solid #fff; 
clear:both; 
height :80px; 


padding:10px 10px 0; 
width:910px; 


9-63 CSS 规则 (9) 


6. footer 区 域 的 制作 


#rollBox ul { 
list-style:none; 

} 

#rollBox ul li ( 
margin-right:10px; 
float:left; 


} 

#rollBox ul lia { 
display:block; 
width:140px; 
height: 70px; 
background: 


url (../images/move-bg.gif 
no-repeat center center 


} 

#rollBox img ( 
padding: 1px; 
display:block; 
margin:0 auto; 
width:138px; 
height: 68px; 


9-64 CSS 规则 (10) 


D 将 鼠标 光标 定位 在 图 9-62 “<div class= "clear" ></div>” H J IB] , fE `M WÍ fu 
EMAA H footer” Hy div 容器 。 在 该 容器 中 插入 相关 版 权 内 容 , 如 图 9-65 所 示 。 


<div id="footer"> 


<div id="footer_con"> 字 泽 集团 版 权 所 有 <span> 技 术 支 持 : 字 泽 网 络 </span></div> 


</div> 


图 9-65 页 面 结构 (9) 


@ 切换 到 div. css 文件 中 ,创建 CSS 规 则 ,如 图 9-66 所 示 。 至 此 ,网 站 主页 整体 布局 


全 部 完成 。 
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#footer { 


7. 使 用 index. html 创建 模板 width:100%; 


height:85px; 
background: 2 
margin-top:20px; 


Q@ 打开 刚刚 制作 完成 的 网 站 主页 页 面 index. html, 执 行 padding-top: 10px; 
“文件 ”>“ 另 存 为 模板 "命令 ,打开 “另存 模板 ”对 话 框 。 e enet 
© 在 对 话 框 中 的 “站 点 ”下 拉 列 表 中 选择 站 点 “模板 示例 ”， ee 


line-height:74px; 


在 “另存 为 ”文本 框 中 输入 模板 名 称 muban, 如 图 9-67 所 示 。 单 porder-top:1px solid 
击 “ 保 存 "按钮 ,将 当前 页 面 “index. html"* 保 存 为 用 于 创建 其 他 ”wargin:o auto; 


background: 


页 面 的 模板 。 url(../images/logo2.png) 


no-repeat left center; 


© 创建 成 功 后 ,软件 将 muban. dwt 文件 保存 在 Templates color:#f£ff; 


) 


文件 夹 下 。 在 模板 文档 muban. dwt 中 选择 名 为 content 的 div 79ter con span 


float:right; 
= display:inline; 
容器 。 


@ 执行 菜单 栏 中 的 “插入 ”->" 模 板 对 象 "可 编辑 区 域 ” 
命令 ,或 者 按 下 组 合 键 Ctrl 十 Alt 十 V, 此 时 打开 “新 建 可 编辑 区 
域 ”对话 框 ,如 图 9-68 所 示 。 在 该 对 话 框 的 “名 称 ” 文 本 框 中 输入 可 编辑 区 域 的 名 称 
content, 单 击 “ 确 定 ” 按 钮 , 即 可 创建 可 编辑 区 域 。 


图 9-66 CSS 规 则 (11) 


另存 模板 


站 点 : | YUZE 公 司 
现存 的 模板 : [muban 


新 建 可 编辑 区 域 


SW content 


图 9-67 “另存 模板 ”对 话 框 图 9-68 创建 可 编辑 区 域 


8. 使 用 模板 创建 二 级 页 面 
D 执行 “文件 ”>“ 新 建 " 命 令 , 打 开 “ 新 建文 档 ” 对 话 框 ,选择 “模板 中 的 页 ”选项 卡 , 在 


<div id="content"> “站 点 ”列表 中 选择 当前 站 点 下 的 模板 文件 muban， 
ri 单 击 “ 创 建 "按钮 , 即 可 基于 模板 创建 一 个 新 页 面 。 


<li><a href="#"> 岗 位 介绍 </a></1i> @ 删除 content 容器 内 部 所 有 内 容 , 然 后 创建 


<li><a href="#"> 人 才 培 养 </a></1i> 


lb href="#"> 培 训 交 流 </a></1i> 名 为 leftsiderbar 的 div 容器 ,并 在 该 容器 内 部 使 用 

tg 无 序列 表 制作 侧 边栏 导航 ,如 图 9-69 所 示 。 

@ 切换 到 div. css 文件 中 ,创建 CSS 规则 ,如 
图 9-70 和 图 9-71 所 示 。 

@ 保存 当前 文档 ,通过 浏览 器 预览 可 以 看 到 效果 ,如 图 9-72 所 示 。 

© 在 leftsiderbar 容器 后 面 插入 名 为 right_content 的 div 容器 ,并 在 该 容器 内 部 插 
入 标题 和 3 组 7 行 2 列 的 表格 ,由 于 表格 结构 较 多 这 里 不 再 给 出 页 面 结构 ,请 读者 参考 本 
示例 源 文件 。 


210 


9-69 页 面 结构 (10) 


第 9 = REE SRT] 


leftsiderbar { #leftsiderbar ul li { 
width:218px; margin-bottom: 5px; 
float:left; list-style:none; 
padding-bottom: 20px; } 
border-left:lpx #a52001 solid; #leftsiderbar ul li a { 
border-bottom: 1px #a52001 solid; display:block; 
border-right:lpx #a52001 solid; width:218px; 

} height:24px; 

#leftsiderbar h2 { line-height:24px; 
line-height:30px; text-align:center; 
font-size:18px; color: #999; 
text-align: center; font-size:14px; 
background:#a52001; border-bottom: 1px #a52001 dashed; 
Color:#FFF; } 

} #1leftsiderbar ul li a:hover { 

#leftsiderbar ul { color:#000; 
width:218px; text-decoration: none; 

1 } 

图 9-70 CSS 规则 (12) 图 9-71 CSS 规则 (13) 


© 切换 到 div. css 文件 中 ,创建 CSS 规则 ,用 于 美化 表格 外 观 , 如 图 9-73 所 示 。 保 存 
当前 文档 ,通过 浏览 器 预览 可 以 看 到 效果 。 至 此 ,网 站 的 二 级 页 面 已 经 制作 完成 ,读者 可 
以 根据 制作 过 程 制作 其 他 页 面 , 这 里 不 再 袭 述 。 


#right_content ( 
float:left; 
margin-left:20px; 
width: 668px; 

AAE - wina... DOR H 

一 #right job { 
e F:\ 教 村 编写 汇总 \ 前 v margin-top:20px; 
} 

文件 中 MO 查看 WD Wm #right job table { 

ARER e AE EA margin-bottom: 10px; 

- border:lpx solid #EBEBEB; 
border-collapse:collapse; 

} 

#right job table th { 
background: #FAFAFA; 
border:lpx solid #EBEBEB; 
font-weight:normal; 

} 

#right job table td { 
padding-left:10px; 
border:1px solid #EBEBEB; 


9-73 CSS 规则 (14) 


94 实 训 


1. RIEK 
利用 本 章 所 学 习 的 模板 知识 ,快速 创建 多 个 布局 相似 的 页 面 。 
2. 过 程 指导 


O 启动 Dreamweaver CS5 ,并 创建 站 点 。 在 站 点 内 部 创建 如 图 9-74 所 示 的 页 面 , 示 
意图 如 图 9-75 所 示 。 
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PERDE 


<s 


+e 
FERE 
Tt 
Tami 
+ñ 


Hisssnes 


ABOUT US 
宇 泽 互联 国际 有 限 公司 


的 想法 与 目的 / 人 性 化 的 品 胡 冰 可 产品 ， 立 霜 化 的 " 交 机 是 "工程 分清" 主 次 "与 -远近 "， 看 
中 "马上 出 效果 ”/ 优秀 的 理 才 是 对 企业 所 功 既 验 的 拉 伟 与 总 结 ， 而 不 是 全 引进 ， 要 有 原 神 性 / @ 
堤 理 念 不 只 是 写 在 纸 上， 而 是 要 融入 整个 企业 的 员工 、 窜 户 、 伙 信之 中 ， 变 成 "生产 力 ”/ WWF 
要 人 云 刘 云 ， 不 要 没有 实用 性 ， 不 要 不 能 名 决 间 题 ， 不 要 人 记 不 住 ， 可 有 束 沂 冲击 力 ， 要 亲切 乐 人 ， 要 人 原意 接受 ， 
Maga. 
Tama ipa maw. mRAPABeINWNS. ARMILAN mn elistepuiasr. MES 
产品 系列 包 芝 的 识别 梁 构 规划 ， 使 包 法 实现 体系 化 ， 从 而 体现 品牌 的 到 体 冲 击 力 
因为 后 泽 肖 有 在 与 众多 措 体 合作 历史 中 带 来 的 特色 沉 源 ， 开 发 出 了 一 些 特色 媒体 妇 合 ， 所 以 能 为 生 业 提供 具有 字 
RREN ARRATE DUNSA. TPNARMRSEREHA FRENAR SS. ERREPA 
ROR EARTHEN- WW hGDBrt+.. 


字 泽 的 优势 
字 泽 的 品牌 须 问 研 发 出 了 更 加 适合 中 国字 入 品 牌 实效 体系 "， 在 各 牌 策 路 、 理 仿 、 交 名 、 架 
构 、CI、 文 化 竺 方面 有 独特 的 解决 方案 、 方 法 与 工具 这 占 现在 ， 听 懂 企 业 一 把 手 及 管理 团队 


9-74 效果 图 


wrapper 
header 
nav 
content 
left_sider 
footer 


图 9-75 示意 图 


@ 将 制作 完成 的 网 页 另存 为 模板 ,并 在 模板 中 指定 可 以 编辑 的 div 容器 。 

© Æ Dreamweaver CS5 菜单 栏 执行 “文件 ”一 “新 建 " 命 令 , 在 弹出 的 对 话 框 中 选择 
“ 空 模板 ”选项 。 然 后 根据 实际 需要 从 右边 “模板 类 型 "中 选择 需要 的 模板 ,最 后 单 击 “ 创 
建 "按钮 即 可 创建 与 模板 布局 相同 的 新 页 面 。 

@ 根据 实际 需要 .新 增 或 删除 部 分 div 容器 ,完成 对 应 页 面 的 制作 ,如 图 9-76 


所 示 。 
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宇 泽 互联 国际 有 限 公司 
CI 村 统 设计 
poran i ERNERMOF EAT WNE PEEN TWN 5”. TENNE, S. è 
亲生 请 E, RA. CI, KAPATRSRANAAR. DESIA: MERMAEERSHNBUDE 
š 、 Stherb ZEDRARPFARRPME, TTEN. N-NE. 团队 中 有 中 外 契合 名 专家 ， 通 过 
ot == am. #xummqpamanmuamamismpi, TUNG, AWELE. 
SRR 


正 于 设计 品牌 标 赤 的 价值 在 二 是 用 荣 路 与 生财 在 进行 天 的 设计 ， 正 邦 搓 有 十 几 征 可 累 收入 
本 的 各 国标 去 数据 库 ， 知 道 品牌 适合 什么 样 的 标志 ， 而 正邦 的 9 一 直 是 引 倾 行业 的 标准 ， 是 国 为 少 
见 的 拥有 YI 研发 团队 的 公司 ， 并 有 强大 的 世界 ?1 至 据 库 支 折 ， 同 时 在 包 莫 设计 方面 ， 正 邦 便 重 全 

人 >。 品系 列 和 的 识 全 机 机 刘 ， 合 包罗 实现 体系 化 ， 从 而 体现 史上 全 冲力 。 


Wi scm 


9-76 ”根据 模板 制作 出 的 其 他 页 面 


1. 什么 是 模板 ? 它 有 什么 作用 ? 

2. 什么 是 行为 .事件 和 动作 ? 

3. 举例 说 明 网 页 中 “行为 ”的 应 用 领域 。 

4. 在 网 页 中 插入 “火焰 燃烧 文字 ”Java Applet 对 象 ,设置 相关 参数 ,使 得 页 面 效 果 如 
图 9-77 所 示 。 


5. 使 用 “应 用 弹出 信息 行为 ”制作 一 个 弹出 式 信息 ,如 图 9-78 所 示 。 


TTE” 
) 习题 - Firefor - kh [|D S = 
XEO RSO SEV 历史 G) PED IR 1" Ce x à x B @ ( =% - 


` C X & x BOONS EE BEE 
38 13 i 应 选中 整个 页 面 ， 向 网 页 中 添加 “弹出 消息 ”行为 ! 
[JavaScript 应 用 程序 ] 


 Wuyúke 
Ede oino ia 
Click to cool 1 Q P t # @ o mannna Ç > t š @ ° O 


图 9-77 习题 4 对 应 图 图 9-78 习题 5 对 应 图 
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6. 使 用 模板 的 知识 创建 如 图 9-79 所 示 的 多 个 页 面 ,示意 图 如 图 9-80 所 示 。 


2 - — & 


S INFINITE EXTENT 

日 Support Morbi sollicitudin, augue a fringilla pharetra, tellus risus malesuada nisi id dignissim eros magna 
© More About Depertment eget erat. Proin sit amet turpis. Proin nec lectus eget uma placerat euismod. 

z = Nullam egestas condimentum est. Sed venenatis urna ut nibh. Nunc laoreet commodo dui. Integer 
© About Organigaton vehicula. Nunc pharetra ante et tortor. Morbi vel tellus et est varius dictum. Nunc sit amet risus. 
© Our Work Integer tortor mauris, dapibus pharetra, dignissim nec, luctus vel, augue. Pellentesque 


habitanmorbi tristique senectus et netus eteuspendisse diam. Nullam fermentum. Phasellus elit. 
sal Morbi dapibim id hgula. Curabitur malesuada dignissim diam. 


Nullam egestas condimentum est. Sed venenatis uma ut nibh. Nunc laoreet commodo dui, Integer 
vehicula. Nunc pharetra ante et tortor. Morbi vel tellus et est varius dictum. Nunc sit amet risus. 
Integer tortor mauris, dapbus pharetra, dignissim nec, luctus vel, augue. Pellentesque 
habtanmorbi tristique senectus et netus eteuspendisse diam. Nullam fermentum. Phasellus elit. 
Morbi dapibim id ligula. Curabitur malesuada dignissim diam. 


Nullam egestas condimentum est. Sed venenatis urna ut nibh. Nunc laoreet commodo dui. Integer 
vehicula. Nunc pharetra ante et tortor. Morbi vel tellus et est vanus dictum. Nunc sit amet risus. 
Integer tortor mauris, dapibus pharetra, dignissim nec, luctus vel, augue. Pellentesque 
habitanmorbi tristique senectus et netus eteuspendisse diam. Nullam fermentum. Phasellus elit. 
Morbi dapibim id ligula. Curabitur malesuada dignissim diam. 


Copyrom © innte extend 20XX Al Rights Reserved 


图 9-79 最 终 效 果 


9-80 布局 示意 图 
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第 10 章 网 站 后 台 的 设计 与 制作 


口 了 解 网 站 后 台 管 理 系统 的 作用 。 

口 能 够 利用 框架 知识 完成 页 面 的 搭建 。 

口 能 够 灵活 运用 “DIV 十 CSS” 模 式 完成 多 个 页 面 的 制作 。 

口 能 够 完成 导航 与 各 个 页 面 的 链接 设置 。 

网 站 后 台 管理 系统 主要 是 用 于 对 网 站 前 台 的 信息 管理 ,如 文字 、 图 片 . 影 音 ,以 及 其 他 
日 常 文件 的 发 布 . 更 新 、 删 除 等 操作 ,同时 也 包括 各 种 信息 进行 统计 和 管理 。 总 之 ,网 站 后 
台 就 是 对 网 站 数据 库 和 相关 文件 进行 快速 操作 的 平台 ,以 使 得 前 台 内 容 得 到 及 时 的 更 新 
调整 。 本 章 主要 向 读者 介绍 网 站 后 台 的 设计 与 静态 页 面 实 现 方法 ,对 于 如 何 实现 动态 管 
理 功能 这 里 不 作为 重点 。 


101 规划 与 分 析 


网 站 后 台 管 理 系 统 的 主要 功能 包括 信息 发 布 .图 片 及 其 他 文件 上 传 、 内 容 采集 、 图 片 
添加 水 印 、 信 息 审 核 会 员 审核 和 消息 群发 等 ,以 及 对 上 述 所 有 信息 的 修改 删除 操作 。 本 
节 以 实现 网 站 后 台 最 基本 的 功能 页 面 为 目标 ,向 读者 介绍 其 实现 过 程 。 


10.1.1 相关 概念 
创建 网 站 后 台 管 理 系统 的 目的 就 是 让 不 熟悉 网 站 的 用 户 有 一 个 直观 的 表示 方法 ,也 
让 各 种 网 络 编程 语言 用 户 可 以 通过 简单 的 方式 来 开发 个 性 化 的 网 站 。 
后 台 的 分 类 


根据 不 同 的 需求 ,网 站 后 台 管 理 系统 有 几 种 不 同 的 分 类 方法 。 从 应 用 层面 来 讲 , 可 以 
被 划分 为 侧重 于 后 台 管理 的 后 台 管理 系统 、 侧 重 于 风格 设计 的 后 台 管理 系统 和 侧重 于 前 
台 发 布 的 后 台 管 理 系统 。 


2. 开发 语言 


现在 比较 常见 的 网 站 后 台 管 理 系统 开发 语言 主要 有 ASP 和 PHP。 由 于 用 PHP 开 
发 的 网 站 后 台 管理 系统 语言 的 加 密 性 不 强 , 所 以 用 PHP 开发 的 网 站 后 台 管理 系统 基本 
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上 都 是 开源 的 。 
3. CMS 


CMS(Content Management System) 译 为 “内 容 管理 系统 ”, 可 以 加 快 网 站 开发 的 速 
度 和 减少 开发 的 成 本 。CMS 其 实 是 一 个 很 广泛 的 称呼 ,从 一 般 的 博客 程序 新闻 发 布 程 
序 到 综合 性 的 网 站 管理 程序 都 可 以 被 称 为 内 容 管理 系统 。 国 内 最 常用 的 CMS 系统 有 
DEDE .帝国 网 站 管理 系统 、 动 易 和 逐 浪 等 。 


10.1.2 规划 设计 


网 站 后 台 管理 系统 要 根据 网 站 本 身 的 内 容 和 性 质 进 行 开 发 ,但 对 网 页 维护 模块 来 讲 
都 有 添加 、 删 除 和 修改 等 基本 的 数据 库 维 护 功能 。 这 里 以 设计 制作 “团购 网 ”的 后 台 管 理 
系统 为 虚拟 目标 ,规划 设计 团购 网 后 台 的 基本 页 面 。 此 外 ,结合 表格 以 及 框架 的 基本 知 
识 ,使 用 Dreamweaver CS5 制作 网 站 后 台 管理 平台 的 基本 页 面 。 


1. Login 页 面 


登录 页 面 应 该 包括 网 站 的 Logo、 用 户 名 、 密 码 ,按钮 等 元 素 , 通 过 成 熟 的 构思 与 设计 ， 
Login 页 面 最 终 效果 如 图 10-1 所 示 ,布局 示意 图 如 图 10-2 所 示 。 


XQ) MEV FEV RRO IAV WHW 
kenz | 大 无 和 a-a =- mav- t0- IRO- @- 


名 sses 网 站 后 台 管理 系统 入 口 


DED 


图 10-1 登录 页 面 最 终 效 果 
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wrapper 


left_content 


right_content 


footer 


图 10-2 登录 页 面 布局 示意 图 


2. 后 台 管 理 页 面 


通过 构思 拟 采 用 框架 实现 后 台 页 面 ,单个 面 的 最 终 效果 如 图 10-3 所 示 。 从 页 面 整个 
布局 来 看 ,页 面 由 顶部 、 左 侧 、 右 侧 以 及 底部 4 个 框架 组 合 而 成 ,分 别 对 应 header. html, 
left. html、main. html 和 foot. html 4 个 页 面 ,示意 图 如 图 10-4 所 示 。 
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10-3 ”后台 某 页 面 最 终 效果 


header.html 


left.html 


main.html 


foot.html 


图 10-4 


后 台 框架 示意 图 
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102 设计 与 实现 


根据 之 前 的 分 析 ,Login 页 面 拟 使 用 login. css 文档 对 其 进行 控制 ,后 人 台 页 面 拟 使 用 
div. css 文档 对 其 进行 控制 。 


10.2.1 登录 页 面 的 实现 


1. 创建 站 点 


O 启动 Dreamweaver CS5 创建 站 点 ,并 在 站 点 内 分 别 创建 用 于 放置 图 像 的 images 
文件 夹 和 放置 CSS 文件 的 style 文件 夹 。 

© DIUS A XHTML 文档 和 CSS 文档 ,将 网 页 文档 保存 在 根 目录 下 ,并 重 命 名 
为 login. html, 将 CSS 文档 保存 在 style 文件 夹 下 ,并 重 命名 为 login. css。 

© 将 创建 完成 的 网 页 文档 和 CSS 文档 链接 起 来 。 


2. 实现 过 程 


O 待 准备 工作 结束 后 ,切换 到 login. html 文档 中 ,在 “插入 ?面板 的 “常用 ”选项 卡 中 
单 击 “ 插 入 Div 标签 ”按钮 ,弹出 “插入 Div 标签 ”对话 框 ,在 “插入 ”下拉 菜 单 中 选择 “在 搬 
入 点 ?选项 ,在 ID 下 拉 列 表 框 中 输入 wrapper, 最 后 单 击 “ 确 定 ” 按 钮 , 即 可 在 页 面 中 插入 
wrapper 容器 o 

© 切换 到 login. css 文档 ,为 整个 页 面 进行 初始 化 定义 ,如 图 10-5 所 示 。 

© 切换 回 login. html 文档 中 ,删除 wrapper 容器 内 多 余 文 字 ,在 “插入 "面板 的 “ 常 
用 ”选项 卡 中 单 击 “ 插 入 Div 标签 ”按钮 ,按照 如 图 10-6 所 示 的 参数 设置 在 wrapper 容器 
内 部 插入 left_content 容器 。 


* 4 
margin:0; WA Div 标签 
padding: 0; 

) 

£ 插入 :| 在 开始 标签 之 后 M [<div id="wrapper"> v | 

float:left; = a 


TD: heft_eontent ` 


fr 
float:right; P css 规则 


} 

.clear 
clear:both; 

} 


Æ 10-5 CSS 规则 (1) 图 10-6 插入 left_content 容器 


@ 在 left_content 容器 内 部 ,依次 使 用 标题 元 素 hl 和 有 序列 表 ol 元 素 作为 盛 放 容 
器 ,放置 相关 文字 ,具体 结构 如 图 10-7 所 示 。 

© 切换 到 login. css 文档 中 ,编写 相应 的 CSS 规则 ,具体 内 容 如 图 10-8 所 示 。 保 存 
当前 文档 ,通过 浏览 器 预览 后 的 效果 如 图 10-9 所 示 。 
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background:#1d3647 
url(../images/login bg.jpg) repeat-x; 
font-size:l4px; 
line-height:1.5; 
color: #666; 


:1000px; 
margin:40px auto 0 auto; 


<div id="wrapper"> height:380px; 


<div id="left content" class="fl"> padding:150px 0 0 150px; 
<h1> 字 泽 互联 国际 </h1> background:url(../images/login line.jpg) 
<o1> no-repeat right center; 


<1i> 地 区 商家 信息 网 门户 站 建立 的 首选 方案 </1i> 
<1i> 一 站 通 式 的 整合 方式 ， 方 便 用 户 使 用 </1i> 
<1i> 强 大 的 后 台 系统 ， 管 理 内 容易 如 反 掌 </1i> 


. .Vimages/logo-png) 


</o1> no-repeat; 
</div> height:80px; 
</div> 
10-7 ”页面 结构 (1) 10-8 ”CSS 规则 (2) 


C ERT - windows Internet Ezplorer DER 

G E r WHRS CEW FEARR (201D —— MARERA AEE M ++ X [/ P- 
IO RD FV BRRW IAD WHU 

AURR H- @x6EX0 GEERS ØLL x N- D oer MEQ0)- +G - IRO- @- 


出 现 文字 与 一 
图 像 重 且 现象 


图 10-9 预览 效果 (1) 


© 为 了 解决 文字 与 图 像 重 又 的 问题 ,这 里 需要 将 文字 进行 隐藏 。 切 换 到 login. css 
文档 中 ,在 “# left_content hl1” 规 则 内 添加 “text-indent: 一 9999px;” 规 则 ,其 含义 是 让 文 
字 缩 进 一 9999px 的 距离 ,由 于 当前 显示 器 不 可 能 有 9999px 的 宽度 ,所 以 文字 被 “ 隐 

BT. 
@ 切换 回 login. html 文档 中 ,在 “插入 ?面板 的 “常用 ?选项 卡 中 单 击 “插入 Div 标签 ” 
按钮 ,弹出 “插入 Div 标签 ”对 话 框 ,在 “插入 ”下 拉 菜 单 中 选择 “在 标签 之 后 ”选项 ,并 在 后 
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面 的 下 拉 菜 单 中 选择 “二 div id 一"left_content" 二 ”选项 ,在 “ID? 下 拉 列 表 框 中 输入 right_ 
content, 最 后 单 击 “确定 ”按钮 , 即 可 在 left_content 容器 后 面 插入 right_content 容器 ,如 
图 10-10 所 示 。 

由 于 left_content 容器 之 前 已 经 赋予 浮动 属性 ,这 里 为 了 让 right_content 容器 放 
置 在 left_content 容器 的 右边 ,也 需要 赋予 浮动 属性 ,具体 页 码 结构 如 图 10-11 所 示 。 


<div id=" left_cont M <div id="wrapper"> 
J <div id="left content" class="fl"> 
<h1> 宇 泽 互联 国际 </h1> 
<ol> 
</o1> 
</div> 
<div id="right_content" class="fl"></div> 
</div> 


图 10-10 插入 right_content 容器 10-11 页 面 结 构 (2) 


@ 在 right_content 容器 内 部 ,根据 实际 需要 插入 标题 和 相关 表单 ,具体 的 代码 结构 
如 图 10-12 所 示 。 从 图 10-12 中 可 以 看 出 ,为 了 方便 对 表单 内 的 各 种 元 素 进行 控制 ,可 以 
使 用 div 标签 对 局 部 表单 元 素 进行 控制 。 

四 切换 到 “login. css” 文 档 中 ,编写 相应 的 CSS 规则 ,具体 内 容 如 图 10-13 所 示 。 此 
时 的 页 面 效 果 如 图 10-14 所 示 。 


<div id="right content" class="f1"> 
<h1> 网 站 后 台 管理 系统 入 口 </h1> 
<div id="sys"> 
<form action="" method="post"> 
<div> 用 户 名 ; #right_content { 
<label for="username"></label> width:330px; 


<input type="text" name="username"” id="username" /> height:380px; 
</div> padding:150px 0 0 50px; 
<div> 密 i: ) 
<label for="password"></label> #right_content hl { 
<input type="password" name="password" id="password" /> font-size:24px; 
</div> font-fam: 微软 雅 黑 "7 
<div class="btns"> font-weight:normal; 
<input type="button" name="button1" id="buttonl" /> ) 
<input type="button" name="button2" id="button2" /> #sys ( 
</div> margin-top: 20px; 
</form> line-height:2.4; 
</div> width:250px; 
</div> ) 
图 10-12 页 面 结构 (3) 图 10-13 CSS 规则 (3) 


QD 从 图 10-14 可 以 看 出 ,此 时 页 面 效果 并 非 令 人 满意 ,为 了 解决 这 个 问题 再 次 切换 
到 login. css 文档 中 ,编写 对 应 的 CSS 规则 ,如 图 10-15 所 示 。 保 存 当 前 网 页 文档 ,通过 浏 
览 器 预览 可 以 看 到 效果 ,如 图 10-16 所 示 。 

O 切换 回 login. html 文档 中 ,将 鼠标 指针 定位 在 “设计 ”视图 中 ,在 “插入 ”面板 的 “ 常 
用 ?选项 卡 中 单 击 “插入 Div 标签 "按钮 .按照 如 图 10-17 所 示 的 参数 设置 在 right_content 
容器 后 面 插入 footer 容器 。 

B 由 于 left_content 容器 和 right_content 容器 均 使 用 了 浮动 属性 ,为 了 解决 后 面容 
器 布局 混乱 ,这 里 为 footer 容器 增加 清除 浮动 的 属性 ,并 在 其 内 部 插入 相关 版 权 文字 , 具 
体 结构 如 图 10-18 所 示 。 
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password { 
width:170px; 


) 
#buttonl 
border:none; 
background: url(../images/014.gif) 
no-repeat 0 0; 
width: 80px; 
height:27px; 
) 
#button2 
x border:none; 
网 站 后 台 管 理 系 统 入 口 background: url(../images/015.gif) 
no-repeat 0 0; 
r: width:80px; 
height:27px; 


} 


E h i .btns { 
i text-align:center; 


PR 
10-15 CSS 规则 (4) 


标题 文档 - Windows Internet Explorer 
GO [e rumaimscpvn s| x [A 
XWo RAD EFV PRAW IAD WMU 
RRR [Bge Q ØE. x RR. D 


网 站 后 台 管理 系统 入 口 


WA Div 标签 


图 10-16 预览 效果 (3) 10-17 插入 footer 容器 


O 切换 到 login. css 文档 中 ,编写 对 应 的 CSS 规则 ,如 图 10-19 所 示 。 至 此 ,网 站 后 
台 登 录 页 面 已 经 制作 完成 ,读者 可 以 根据 喜好 自行 修改 部 分 CSS 规则 。 


#footer 
color:#FFF; 
font-si 
text-alig 


height: 50px; 
<div id="footer" class="clear">Copyright @ padding-top:20px; 
2012-2015 字 泽 互联 国际 </div> ) 
图 10-18 页 面 结构 (4) 图 10-19 CSS 规则 (5) 


10.2.2 后 台 页 面 的 实现 


1. 创建 包含 框架 的 XHTML 文档 


根据 之 前 的 分 析 , 这 里 拟 采 用 框架 的 形式 作为 后 台 页 面 的 基础 。 
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D 在 菜单 栏 中 执行 “文件 ”一 新 建 > 命 令 , 打 开 * 新 建文 档 ” 对 话 框 。 在 此 对 话 框 中 ， 
选择 “示例 中 的 页 ”选项 卡 , 在 “示例 文件 夹 ”" 中 选择 “框架 页 ”, 在 “示例 页 ”中 选择 上方 固 
定 , 左 侧 嵌 套 ” 的 框架 布局 ,最 后 单 击 “ 创 建 " 按 钮 , 即 可 创建 包含 框架 的 网 页 。 

© 在 软件 菜单 栏 中 执行 “查看 ”>“ 可 视 化 助理 ”>“ 框 架 边 框 ” 命 令 , 使 得 边框 在 “ 设 
计 ” 视 图 中 显示 出 来 。 

© 选择 整个 框架 的 底部 边框 ,向 上 拖 动 一 定 距离 , 即 可 创建 底部 框架 。 

@ 将 光标 分 别 定 位 在 框架 集 的 各 个 区 域 ,将 当前 页 面 分 别 保存 为 header. html, left. 
html, main. html 和 foot. html, 最 后 将 整个 框架 集 保 存 为 index. html, 


2. 将 CSS 文档 链接 至 页 面 


D 新 建 空白 CSS 文档 ,并 将 该 文档 重 命名 为 div. css, 
© 将 div. css 文档 分 别 链 接 到 left. html 和 main. html 页 面 中 。 由 于 header. html 页 
面 和 foot. html 页 面 中 的 内 容 较 少 , 拟 采用 内 部 样式 对 页 面 进行 控制 。 


3. header. html 页 面 的 制作 


O 根据 需要 调整 顶部 框架 的 高 度 ,这 里 设置 为 75px。 

© 将 鼠标 定位 框架 顶部 的 header. html 页 面 中 ,在 页 面 中 插入 名 为 header 的 div 
容器 。 
© 在 名 为 header 的 div 容器 内 部 ,再 次 创建 两 个 div 容器 ,此 时 页 面 结 构 如 图 10-20 
所 示 。 在 当前 页 面 项 部 的 head 区 域内 ,创建 相关 规则 ,如 图 10-21 所 示 。 


<style type="text/css"> 
% ( 
margin: 0; 
padding: 0; 


html, body ( 

color: #3D3D3D; 

font: 12px/150% Tahoma, Verdana, Helvetica, 
Arial, sans-serif; 
body ( 
line-height:1.5; 
background: #dee4ed; 


idth:100%; 


<body> 
<div id="header"> height:64px; 
<div id="header left" ></div> background: url(images/header bg.gif) 
<div id="header right"></div> repeat-x left top; 
</div> } 
</body> </style> 
图 10-20 页面 结构 (5) 图 10-21 CSS 样 式 代码 (1) 


@ 保存 当前 网 页 文档 ,通过 浏览 器 预览 可 以 看 到 效果 ,如 图 10-22 所 示 。 


图 10-22 预览 效果 (4) 
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© 在 名 为 header_left 的 div 容器 内 部 ,插入 网 站 Logo 图 像 ; 在 名 为 header_right 的 
div 容器 内 部 ,插入 相关 文字 链接 ,此 时 的 结构 代码 如 图 10-23 所 示 。 切 换 到 div. css 文件 
中 ,创建 相关 规则 ,如 图 10-24 所 示 。 


#header left 
float:left; 
margin-left :30px; 


:right; 
height :26px; 
Color:#FFF; 
padding-top: 5px; 
padding-right :30px; 


<body> } 
<div id="header"> #header right a { 
<div id="header left" class="cl"><img src= width:50px; 
"images/logo_s.png" width="114" height="38" /></div> padding-right: 3px; 
<div RET right"> 欢 迎 你 Yuzel Color:#FFF; 
浏 


text-decoration:none; 


r_right a:hover { 
</div> xt-decoration:underline; 
</body> ) 


图 10-23 页面 结构 (6) 图 10-24 CSS 规 则 (6) 
@ 保存 当前 网 页 文档 ,通过 浏览 器 预览 可 以 看 到 效果 ,如 图 10-25 所 示 。 


[er] zm) NEEN AN PEER HIEN bester Mol E y X / 
zmo mO ZEV MW IAV Whw 
eE Øines ü- m O @- Tv- sto- 


图 10-25 ”预览 效果 (5) 


4. left. html 页 面 的 制作 


该 页 面 用 于 显示 整个 管理 平台 的 导航 ,根据 实际 经 验 可 知 , 这 种 纵向 的 导航 一 般 采 用 
无 序列 表 或 自 定义 列表 进行 实现 ,后 期 再 对 其 进行 美化 可 呈现 出 漂亮 的 外 观 。 具 体操 作 
如 下 : 

O 在 “设计 ?视图 中 ,选择 左 侧 框架 ,根据 需要 调整 左 侧 框架 的 宽度 ,如 图 10-26 所 
示 , 这 里 将 列 宽 设 置 为 175px。 


性 

mj Ea 边框 人 @) E ~ meo r 

mg 边框 宽度 和 0 f 
av 单位 四 
as er v fam 


10-26 设置 左 侧 框架 宽度 


© 将 鼠标 指针 定位 在 左 侧 框架 left. html 页 面 中 ,然后 链接 div. css 文档 ,最 后 在 页 
面 中 插入 名 为 left_nav 的 div 容器 。 
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@ 在 名 为 left_nav 的 div 容器 内 部 ,创建 一 
组 自 定义 列表 ,并 且 输 入 相关 文字 内 容 ,此 时 的 
页 面 结 构 如 图 10-27 所 示 。 

@ 切换 到 div. css 文件 中 ,创建 相关 规则 ,如 
图 10-28 和 图 10-29 所 示 。 

© 保存 页 面 文档 ,通过 浏览 器 预览 后 的 效果 
如 图 10-30 所 示 。 

© 参照 之 前 操作 ,根据 后 台 实 际 情况 的 需 
要 ,使 用 自 定义 列表 完成 左 侧 导航 结构 的 搭建 。 


<body> 
<div id="left_nav"> 
<dl> T 
<dt> 
<div><strong> 管 理 首页 </ strong></div> 
</dt> 
<dd> 
<p><a href="#"> 首 页 </a></p> 
</dd> 
<dd> 
<p><a href="#"> 我 的 账户 信息 </a></p> 
</dd> 
</dl> 
</div> 
</body> 


R) 


图 10-27 页 面 结构 (7) 


由 于 之 前 已 经 对 导航 创建 了 CSS 规则 ,所 以 只 要 左 侧 导航 结构 搭建 完成 ,其 外 观 便 会 自 


动 呈现 出 来 ,如 图 10-31 所 示 。 


ft_nav dd, 


#left_nav dt, #left 


margin: 0; 
padding: 0; 
HARRE E 25138 4863699358 o / 
width:175px; 
) /* 设 置 导 航 整 体 宽度 */ 
#left_nav dt 1 
background: url(../images/left_nav_bg.jpg) 
repeat-x left top; 
display: block; 
float: left; 
height: 32px; 
width: 175px; 
}/* 设 置 自 定义 列表 标题 样式 */ 


#left_nav dt div 
background: url(../images/left_nav_icon.gif) 
no-repeat left center; 


height: 32px. 
}/* 设 置 自 定义 列表 标题 前 面 的 装饰 图 像 */ 
#left_nav dt trong 

color: #FFFFFF; 

display: block; 

height: 32px; 

line-height: 36px; 

overflow: hidden; 

adding: 0 15px 0 
}/* 设 置 自 定义 列表 标题 


10-28 CSS 样式 代码 (2) 


C FAMS 
GO [e r wasae v o x |D 

XD RBO FEV BRAW IAV #meo 
keer sg. < EER.. x ü- 


Windows Internet Explorer 


#left nav dd 
display: block; 
float: left; 
width: 175px; 


#left_nav dd p 

background 
url(../images/left_nav_bg_a.jpg 
no-repeat scroll right 0 


height 
#left nav dd a { 
color: #3B5999; 
display: block; 
height: 32px; 
line-height: 34px; 
margin: 0 30px 0 0; 


overflow: hidden, 
padding: 0 0 0 25px; 
text-decoration:none; 


fleft_nav a:hover { 
text-decoration:underline; 


图 10-29 CSS 样式 代码 (3) 


Powered by fYUZEF2F8 J V2.0 


合 员 有 效 央 日 志 
用 户 短 信 管 理 
注册 用 户 管理 


10-30 ”预览 效果 (6) 
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5. main. html 页 面 的 制作 


O 将 鼠标 指针 定位 在 右 侧 框架 main. html 页 面 中 ,然后 链接 div. css 文档 ,最 后 在 页 
面 中 插入 应 用 main 类 的 div 容器 。 

© 在 应 用 main 类 的 div 容器 内 部 ,插入 应 用 content 类 的 div 容器 ,此 时 的 页 面 结构 
如 图 10-32 所 示 。 

© 将 鼠标 定位 在 应 用 content 类 的 div 容器 的 内 部 , 单 击 “ 插 入 ?面板 “常用 "类别 中 
的 “表格 ?按钮 ,在 弹出 的 对 话 框 中 设置 相关 属性 ,如 图 10-33 所 示 。 


ae: j ae | 
素 格 宽度 : |100 | 百分比 m 
边框 粗细 o ex 
erma | ER 


标题 
ne 
<body> 
<div class="main"> 
<div class="content"></div> 


</div> 
</body> 
10-32 页 面 结构 (8) 10-33 ”设置 表格 属性 


@ 单 击 “ 确 定 ” 按 钮 , 即 可 插入 一 个 5 行 2 列 的 表格 。 合 并 表格 最 上 方 的 两 个 单元 
格 ,作为 表格 的 表 头 ,然后 在 表格 中 输入 文字 内 容 。 由 于 没有 编写 相应 的 CSS 样式 ,所 以 
此 时 表格 外 观 十 分 难看 。 

© 切换 到 div. css 文件 中 ,创建 相关 规则 ,如 图 10-34 和 图 10-35 所 示 。 


table ( 
background-color: white; 
border-collapse:collapse;i/* 合 并 单元 格 之 间 的 边 */ 


ist { 
border:lpx solid #9CB8CC; 
margin: 0; 
padding: 0; 
text-align: left; 
width: 100%; 
-main ( 
background: #FFE; table .big_row th { 
float: left; background: url(../images/th bg.gif) 


w ; A repeat-x 0 0; 
Eg ERS 4px; font-weight: bold; 


margin-top: 3px; height: 30px; 
Padding: 0 ipx 0 0; line-height: 30px; 
width: 99%; text-align: left; 
height:800px; font-size:14px; 

} padding-left:10px; 

-content { 
clear: both; tabla ua I 
float: left; Pororo = s= osos Se 

My: sdMke, order-left: lpx #C1C8D2 solid; 

font-family: "Ri"; padding: Bpx 10px; / REMORE THORRE 
SAREE O 高 ， 堪 右 为 10 像 床下 离 */ 
padding: 0; vertical-align: top;/* 设 置 垂直 对 方 方 式 */ 
width: 100%; font-size:12px; 

} } 

图 10-34 ”CSS 样式 代码 (4) 图 10-35 CSS 样式 代码 (5) 
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@ 将 编写 好 的 类 规则 应 用 在 表格 中 ,如 图 10-36 所 示 。 依 照 这 种 方法 ,创建 多 个 表 
格 即 可 完成 当前 页 面 的 制作 。 
@ 保存 当前 页 面 文档 ,通过 浏览 器 预览 即 可 看 到 效果 ,如 图 10-37 所 示 。 


<body> 
<div class="main"> 


r="0" class="list"> 


pe="col"> 系 统 信息 统计 </th> 


<td width="20%"> 系 统 名 称 < 
td> 后 台 管 理 平台 v2.0</ta> 


/tr 


<tr> 
<td> 系 统 时 间 </tad> 
<td>2012 年 12 月 3 日 09:54:02</td> 
</tr 
tr 
<td> 数 据 库 使 用 </td 
<td>ACCSEE</td> 
</tr> 
<tr 
td>IP 地 址 </td 
td>127.1.1.1</td 


</div> 
</body> 


10-36 页 面 结 构 (9) 


无 标题 文档 - Windows Internet Explorer DER 
GO “e r WHGSCPVGSEMPN o EERE a ARENE V + XX | IPB 

INO MRD FEV RERO IAV 帮助 四 
- « 着 无 öz. Øz @* Øz. rx ü- Oe- mv- 220- IRO- @- 


后 管理 不 和 V2.0 
2012 年 12 有 3 昌 09:54:02 
ACCSEE 


1271.11 


ER (10) 1X940, AATDAN? 


ER (33) DERRETE ATMEN? 


ER ERSCNARRS anumang? 


会 月 次 全 日 者 
会 员 有 交 基 日 志 
用 户 短信 管理 
放胆 用 户 管理 


图 10-37 预览 效果 (7) 
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6. foot. html 页 面 的 制作 


O 根据 需要 调整 底部 框架 的 高 度 ,这 里 设置 为 30px。 

加 将 鼠标 定位 框架 顶部 的 foot. html 页 面 中 ,在 页 面 中 插入 名 为 footer 的 div 容器 ， 
并 输入 版 权 信息 ,此 时 的 页 面 结构 如 图 10-38 所 示 。 

© 在 页 面 顶 部 head 区 域内 创建 内 联 样式 ,如 图 10-39 所 示 。 保 存 当前 页 面 文档 , 通 
过 浏览 器 预览 即 可 看 到 效果 。 


<style type="text/css"> 
“ 


mergin:0; 
padding: 0; 
} 
footer 1 
background: 
url (images/footer_bg.gif) repeat-x 
left top; ig 
color: #FFF; 
border-top: lpx solid #566676; 
text-align: right; 
padding-right :30px; 


<body> height:22px; 
<div id="footer">Powered by 『YuzE 网 络 ] v2.0</div> } 
</body> </style> 
10-38 页 面 结构 (10) 10-39 CSS 样式 代码 (6) 


7. 后 台 其 他 页 面 的 制作 


O 新 建 XHTML 文档 ,并 将 其 保存 为 list. html。 然 后 将 div. css 文档 链接 至 当前 网 
页 文档 中 。 

@ 在 index. html 页 面 被 编辑 的 状态 下 ,将 鼠标 定位 在 右 侧 main 框架 中 ,执行 菜单 
栏 中 的 “文件 ”一 “在 框架 中 打开 ”命令 ,在 弹出 的 对 话 框 中 选择 刚刚 创建 的 list. html 
页 面 。 

© 此 时 ,在 index. html 页 面 右 侧 的 main 框架 中 即刻 显示 空白 的 list. html 页 面 。 为 
了 保持 与 其 他 后 台 页 面 的 统一 ,这 里 沿用 main. html 页 面 的 制作 规范 , 即 在 空白 的 list. html 
页 面 中 依次 创建 戏 套 关系 的 容器 ,具体 结构 如 图 10-40 所 示 。 

@ 在 应 用 content 类 的 div 容器 内 部 ,插入 应 用 title 类 的 div 容器 ,具体 结构 如 
图 10-41 所 示 。 


<div class="main"> 
<body> <div class="content"> 


<div class="main"> <div class="title" style="border-bottom:lpx solid 
<div class="content"></div> #9CB8CC; "> 团购 列表 </div> 

</div> </div> 

</body> </div> 
图 10-40 ”页面 结 构 (11) 图 10-41 插入 应 用 content 类 的 div 容器 


© 切换 到 div. css 文档 中 ,为 新 创建 的 容器 编写 CSS 规则 ,如 图 10-42 所 示 。 
© 在 title 容器 后 面 , 插 入 应 用 operate 类 的 div 容器 ,并 在 其 中 插入 按钮 和 文本 框 等 
多 个 表单 元 素 , 具 体 结构 如 图 10-43 所 示 。 
@ 切换 到 div. css 文档 中 ,编写 相应 的 CSS 规则 ,如 图 10-44 所 示 。 保 存 当 前 页 面 文 
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档 , 通 过 浏览 器 预览 即 可 看 到 效果 ,如 图 10-45 所 示 。 


title { 
background: none repeat scroll 0 0 #FFFFFF; 
border-left: 10px solid #9CB8CC; 
border-top: 1px solid #9CB8CC; 
color: #1E325C; 
display: block; 
float: none; 
font-size: 14px; 
font-weight: bold; 
height: 35px 
line-height: 36px; 
padding-left: 15px; 


图 10-42 CSS 规则 (7) 


<div class="operate"> 


<input 
<input 
<input 
<input type="button" class= 
</form> 
</div> 


" type="text" class="medium" /> 
mgbt”value=" 查 询 ” /> 


10-43 页 面 结 构 (12) 


| 团购 列表 


| 新 省 | d l 出 E» 


10-45 ”预览 效果 (8) 


-operare { 

background: none repeat scroll 
0 0 #D2DBEA; 

border-bottom: 1px solid 
#C8CFDA; 

border-left: 1px solid #9CB8CC; 

padding: 5px 8px; 
} 
-operate .imgbt { 

background: 
url(../images/btn.gif) repeat 
scroll 0 0 transparent; 

border: medium none; 

cursor: pointer; 

height: 26px; 

width: 73px; 
) 
-medium { 

width:150px; 

background: none repeat scroll 
0 0 #F5F5F5; 

border: 1px solid #999999; 

color: #444444; 

font: 100%/1.2em Tahoma, Arial, 
Helvetica, sans-serif; 

margin: 0; 

padding: 3px; 


图 10-44 CSS 规则 (8) 


在 应 用 operate 类 的 div 容器 后 面 ,插入 应 用 list 类 的 div 容器 ,并 在 其 中 根据 实 
际 需 要 插入 11 行 5 列 的 表格 。 参 照 main. html 中 表格 的 处 理 办 法 ,对 创建 的 表格 进行 美 


化 ,这 里 不 再 袭 述 ,预览 效果 如 图 10-46 所 示 。 


口 编号 分 类 名 称 排序 
Dw 红酒 团购 21 
Du mame 10 
On kam 5 

On mam 14 
口 14 “美容 美发 31 
回 15 #RRA 22 
口 16 Shaqe 17 
Dy 电脑 配件 9 

Dis 数码 产品 16 
口 19 驾校 团购 4 


10-46 ”预览 效果 (9) 
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8. 链接 导航 


在 left. html 页 面 中 ,选择 “首页 "文字 内 容 , 将 其 链接 目标 设置 为 main. html, 并 且 显 示 
目标 设置 为 mainFrame, 即 可 实现 单 击 对 应 文字 链接 ,在 右 侧 框架 内 显示 详细 内 容 的 效果 。 

至 此 ,后 台 管理 平台 的 基本 制作 方法 已 经 全 部 讲解 完成 ,读者 可 根据 之 前 的 讲述 再 创 
建 多 个 页 面 ,并 将 这 些 页 面 与 左 侧 导 航 建立 联系 即 可 完成 整个 后 台 的 制作 ,由 于 制作 步骤 
雷同 ,这 里 不 再 袭 述 。 


13 = 训 


1. RIER 
利用 框架 的 相关 知识 ,设计 并 实现 网 站 后 台 管理 系统 的 基本 静态 页 面 。 


2. 过 程 指导 

O 启动 Dreamweaver CS5 ,并 创建 站 点 。 在 站 点 内 创建 包含 上方 固定 , 左 侧 嵌 套 ” 
的 框架 文档 。 

© 在 软件 菜单 栏 中 执行 “查看 ”> 可视化 助理 ”> 框架 边框 命令 ,使 得 边框 在 “ 设 
计 ” 视 图 中 显示 出 来 。 

© 将 光标 分 别 定位 在 框架 集 的 各 个 区 域 ,将 当前 页 面 分 别 保存 为 top. html, menu. 
html 和 main. html, 最 后 将 整个 框架 集 保存 为 index. html。 

@ 根据 实际 需要 创建 CSS 文档 ,并 将 该 文档 链接 至 对 应 的 网 页 。 

© 参照 图 10-47 和 图 10-48 所 示 的 预览 效果 ,完成 网 站 后 台 多 个 页 面 的 制作 。 
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图 10-47 效果 图 
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Æ 10-48 示意 图 


104 =J 题 


1. 网 站 后 台 的 功能 是 什么 ? 
2. 什么 是 CMS? 
3. 参照 图 10-49 和 图 10-50 所 示 的 效果 完成 后 台 管理 系统 的 基本 页 面 制作 。 
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制造 者 管理 信息 系统 


图 10-49 习题 3 对 应 图 (1) 
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10-50 习题 3 对 应 图 (2) 
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第 11 章 论坛 的 设计 与 实现 


口 了 解 论坛 的 基本 概念 。 

口 了 解 论坛 的 主流 程序 。 

口 理解 表格 元 素 作 为 论坛 主要 部 分 实现 的 理由 ,以 及 表格 的 具体 应 用 。 

论坛 又 称 为 BBS(Bulletin Board System, 电 子 公告 栏 系 统 ), 它 为 广大 访问 者 提供 了 
开放 的 互 交 平台 ,用 户 在 BBS 站 点 上 可 以 获得 发 布 信息 、 讨 论 和 聊天 等 各 种 信息 服务 。 
本 章 结合 之 前 所 学 的 CSS 知识 ,向 读者 介绍 论坛 的 设计 与 静态 页 面 的 实现 方法 ,对 于 如 
何 实 现 论坛 的 各 种 功能 这 里 不 作为 重点 。 


1.1 规划 与 分 析 


论坛 最 初 是 为 了 给 计算 机 爱好 者 提供 一 个 互相 交流 的 地 方 而 存在 的 ,但 随 着 计算 机 
用 户 的 增多 目前 已 经 扩展 到 各 行 各 业 之 中 。 


11.1.1 相关 概念 


1. 论坛 的 分 类 


由 于 论坛 快速 的 发 展 壮大 ,现在 的 论坛 几乎 涵盖 了 生活 的 各 个 方面 ,每 一 个 人 基本 上 
都 可 以 找到 自己 感 兴趣 或 者 需要 了 解 的 专题 性 论坛 。 总 的 来 看 可 以 将 论坛 分 为 三 类 。 

(1) 校园 型 论坛 

目前 各 大 高 校 的 论坛 均 为 实名 制 下 校内 交流 的 平台 ,主要 提供 学 术科 学 、 计 算 机 技 
术 文化 人 文体 育 健 身 等 诸多 领域 的 知识 。 

(2) 商业 型 论坛 

商业 型 论坛 主要 进行 商业 宣传 和 产品 推荐 ,目前 手机 论坛 .汽车 论坛 .房地产 论坛 比 
KEE. 

(3) 专题 型 论坛 

专题 型 论坛 ,能 够 吸引 真正 志同道合 的 人 一 起 来 交流 探讨 ,有 利于 信息 的 分 类 整合 和 
搜集 ,专题 型 论坛 对 学 术 、 科 研 .教学 都 起 到 重要 的 作用 ,如 军事 论坛 .感情 诉求 类 论坛 和 
动漫 论坛 等 。 


第 11 章 ， 论坛 的 设计 与 实现 


2. 论坛 营销 

论坛 营销 指 的 是 企业 利用 论坛 这 种 网 络 交流 的 平台 ,通过 文字 、 图 片 、 视 频 等 方式 发 
布 企业 产品 信息 和 服务 信息 ,从 而 让 目标 客户 更 加 深刻 地 了 解 企 业 的 产品 和 服务 ,最 终 达 
到 企业 宣传 企业 的 品牌 、. 加 深 市 场 认 知 度 的 网 络 营销 活动 。 


此 外 ,还 可 以 聘请 或 培养 自己 的 专栏 作家 和 专栏 评论 家 ,针对 网 友 广泛 关心 的 话题 发 
,潜移默化 地 引导 论坛 逐渐 形成 自己 的 主流 风格 。 


3. 主流 论坛 程序 


x 


(1) Discuz 

Crossday Discuz! Board 简称 Discuz, 它 是 康 盛 创 想 科技 有 限 公 司 推出 的 一 套 通用 的 
社区 论坛 软件 系统 ,2010 年 被 腾讯 收购 。 目 前 已 经 成 为 全 球 成 熟 度 最 高 .覆盖 率 最 大 的 
论坛 软件 系统 之 一 。 

(2) PHPWind 

PHPWind 是 一 套 采 用 PHP 十 MySQL 数据 库 的 方式 运行 ,并 可 生成 html 页 面 的 全 
新 且 完 善 的 强大 系统 。 

(3) vBulletin 

vBulletin 是 世界 上 用 户 非 常 广泛 的 PHP 论坛 ,很 多 大 型 论坛 都 选择 vBulletin 作为 
自己 的 社区 。vBulletin 高 效 、 稳 定 、 安 全 ,在 中 国 也 有 很 多 大 型 客户 ,比如 蜂鸟 网 和 51 Bl 
购 等 论坛 都 用 vBulletin。 


11.1.2 规划 设计 


论坛 的 内 容 可 以 根据 实际 需求 进行 改变 ,但 功能 模块 基本 不 变 ,主要 由 用 户 注册 、 用 
户 登 录 、 用 户 管理 ,论坛 板块 管理 .帖子 发 表 、 帖 子 回 复 、 帖 子 浏览 和 帖子 检索 等 功能 模块 
组 成 。 这 里 以 设计 制作 “ 宇 泽 互联 国际 BBS” 为 虚拟 目标 ,规划 设计 论坛 的 基本 页 面 。 


1. 论坛 主页 面 


论坛 主页 面 一 般 包 含 用 户 登 录 和 注册 的 人口 .搜索 服务 ,以 及 各 类 不 同 的 板块 内 容 ， 
并 且 板 块 中 还 需要 显示 主题 数量 ,发帖 数量 .最 后 发 表 的 用 户 信息 等 内 容 。 根 据 实际 的 操 
作 经验 ,页面 整体 布局 采用 "DIV 十 CSS ”的 模式 进行 制作 ,局 部 采用 表格 的 形式 进行 制 
作 。 通 过 成 熟 的 构思 与 设计 ,论坛 主页 面 最 终 效果 如 图 11-1 所 示 ,布局 示意 图 如 图 11-2 
所 示 。 


2. 板块 内 容 列表 页 
当 访 问 者 选择 论坛 中 某 一 板块 内 容 后 , 即 可 进入 板块 内 容 列 表 页 ,该 页 面 用 于 显示 板 
块 内 所 有 帖子 的 发 表 信息 ,以 及 回复 和 查看 的 数量 。 由 于 需要 罗列 的 信息 很 多 ,这 里 拟 采 
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11-1 论坛 主页 预览 效果 


wrap 
header 
2 | [ed headerbanner 
menu 
foruminfo 
userinfo forumstats 
announcement 


mainbox forumlist 


mainbox forumlist 


mainbox forumlist 


box 


footer 
图 11-2 主页 布局 示意 图 


第 11 章 ”论坛 的 设计 与 实现 
用 表格 作为 框架 结构 盛 放 相 关 信 息 。 通 过 成 熟 的 构思 与 设计 ,板块 内 容 列 表 页 最 终 效果 
如 图 11-3 所 示 ,布局 示意 图 如 图 11-4 所 示 。 
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11-3 ”板块 内 容 列表 页 预览 效果 


wrap 
header 
h2 ad_headerbanner 
menu 
foruminfo 
nav 
pages_btns 


mainbox threadlist 


box 


footer 
11-4 布局 示意 图 (1) 


3. 详细 内 容 页 


当 访 问 者 在 板块 内 容 列 表 页 中 单 击 某 个 喜欢 的 帖子 题目 时 , 即 可 打开 详细 内 容 页 。 
该 页 面 主要 显示 帖子 的 详细 信息 ,以 及 回帖 的 相关 信息 。 根 据 实际 需求 ,详细 内 容 页 效果 
如 图 11-5 所 示 ,布局 示意 图 如 图 11-6 所 示 。 
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11-5 详细 内 容 页 预览 效果 


wrap 
header 
h2 ad_headerbanner Sousuo 
menu 
foruminfo 
nav 
pages_btns 


mainbox viewthread 


mainbox viewthread 


box 


footer 


图 11-6 布局 示意 图 (2) 
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112 设计 与 实现 


本 节 以 “摄影 ”为 主题 向 读者 演示 论坛 的 实现 过 程 ,需要 读者 体会 的 是 ,虽然 “DIV 十 
CSS” 网 页 制作 模式 已 经 普及 ,但 并 不 是 任何 时 候 都 必须 使 用 DIV , 当 需 要 罗列 多 种 信息 
时 ,表格 同样 是 首选 元 素 。 


11.2.1 论坛 主页 的 实现 


1. 创建 站 点 


© 启动 Dreamweaver CS5 创建 站 点 ,并 在 站 点 内 分 别 创建 用 于 放置 图 像 的 images 
文件 夹 和 放置 CSS 文件 的 style 文件 夹 。 

© 分 别 创 建 空白 XHTML 文档 和 CSS 文档 ,将 网 页 文档 保存 在 根 目 录 下 ,并 重 命 名 
为 index. html, 将 CSS 文档 保存 在 style 文件 夹 下 ,并 重 命 名 为 div. css。 

© 将 创建 完成 的 网 页 文档 和 CSS 文档 链接 起 来 。 


2. 主页 头 部 区 域 的 制作 


O 待 准备 工作 结束 后 ,切换 到 index. html 文档 中 ,在 “插入 ”面板 的 “常用 ”选项 卡 中 
单 击 “ 插 入 Div 标签 ”按钮 ,弹出 “插入 Div 标签 ”对话 框 ,在 “插入 ”下拉 菜单 中 选择 “在 搬 
人 点 ”选项 ,在 ID 下 拉 列 表 框 中 输入 wrap, 最 后 单 击 “ 确 定 ” 按 钮 , 即 可 在 页 面 中 插入 
wrap 容器 。 

© 切换 到 div. css 文档 ,为 整个 页 面 进行 初始 化 定义 。 由 于 整个 论坛 包含 许多 类 型 
的 元 素 , 所 以 初始 化 规则 相对 比较 复杂 ,如 图 11-7 和 图 11-8 所 示 。 


word-wrap: break-word; list-style:none 
body a 
background: #FFF; color: #262626; 
text-align: center; text-decoration: none; 
body, td, input, textarea, select, a:hover 


butt text-decoration: underline 


n { 
color: #535353; 


font: 12px/1.6em Arial, Helvetica, img 
sans-serif; border: none; 
body, ul, dl, dd, p, hl, h2, h3, h4, h5, em, cite, strong, th ( 
h6, form, fieldset [( font-style: normal; 
margin: 0; font-weight: normal; 
padding: 0; ) 
table 
hl, h2, h3, h4, h5, h6 ( enpty-cells: show 
font-size: lem; border-collapse: collapse; 
) 
图 11-7 初始 化 规则 (1) 图 11-8 初始 化 规则 (2) 


© 切换 回 index. html 文档 中 ,删除 wrap 容器 内 多 余 文 字 , 在 “插入 ”面板 的 “常用 ” 
选项 卡 中 单 击 “插入 Div 标签 ”按钮 ,按照 如 图 11-9 所 示 的 参数 设置 在 wrap 容器 内 部 插 
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入 header 容器 。 
@ 在 header 容器 内 部 ,使 用 标题 元 素 h2 作为 盛 放 容器 ,用 于 放置 论坛 Logo 图 像 ， 


具体 结构 如 图 11-10 所 示 。 


WA Div 标签 


=l a 
Fr 
v janturan O 
<h2><img sre="inages/1ogo.3pg" width="240" height="60" /></h2> 
div 
11-9 插入 header 容器 图 11-10 页 面 结构 (1) 


© 切换 到 div. css 文档 中 ,编写 相应 的 CSS 规则 ,具体 内 容 如 图 11-11 所 示 。 切 换 回 
index. html 文档 中 ,在 h2 元 素 的 后 面 插入 应 用 sousuo 类 的 div 容器 ,用 于 实现 站 内 搜索 
功能 ,如 图 11-12 所 示 。 切 换 到 div. css 文档 中 ,编写 相应 的 CSS 规则 ,具体 内 容 如 图 11-13 
所 示 。 


#wrap 1 
width: 98%; 
text-align: left; 
margin: 0 auto; 


#header | 


width: 100$; 
overflow: hidden; <div id="wrap"> 

) <div id="header"> 

#header h2 1 <h2><img src="images/logo.jpg" width="240" height="60" /></h2> 
float: left; <div class="sousuo"> </div> 
padding: Spx 0; </div> 

) </div> 

11-11 CSS 规则 (1) 11-12 插入 sousuo 容器 


© 在 应 用 sousuo 类 的 div 容器 内 部 插入 表单 ,然后 再 插入 文本 框 和 按钮 两 种 表单 元 
素 。 为 了 增加 用 户 体验 ,这 里 为 文本 框 增加 一 些 动 作 效 果 , 如 图 11-14 所 示 。 此 时 的 页 面 
结构 如 图 11-15 所 示 。 


= 

[er ite “] frwlae= 优秀 摄影 作品 点 我 搜索 ' NEB| 
PE [Feces REM 我 搜索 ) fvalue = 
sue | omlouseDut this. style borderCol ex 


float:right: | onllouseDut this. style. backgroumt "REEEEEF 
height: 33px; | emouseDver this. style borderCol 


line-height :33px; 
padding-right:30px; | 
margin-top: 20px; | m 


| 
| 
x 
onllouseDver this. style backgroundColor= #EBEBEE' 


Æ 11-13 CSS 规则 (2) 11-14 为 文本 框 添加 动作 效果 


11-15 搜索 栏 的 页 面 结构 
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@ 切换 到 div. css 文档 中 ,编写 相应 的 CSS 规则 ,具体 内 容 如 图 11-16 所 示 。 保 存 当 
前 文档 ,通过 浏览 器 预览 后 的 效果 如 图 11-17 所 示 。 


sousuo .txt 
padding: 2px 5px: 
line-height:22px; 
height: 22px 
border: 1px solid #067; 
margin: 0 5px; 
color: #c35301; 


font-size:l4px; 
width:190px; 
text-align:left; 


,sousuo ,txt:hover ( 
border: lpx solid #000; 
background: #EBBBEB ; 


sousuo ,bot 
color:#000; 无 标题 文档 - Windows Internet Explorer 


OO [ArAnA n 8 s o x | 


font-weight:bold 


文件 F) MD 查看 VW) BRAW IAM HMW 


width: 98px; — 
border: 1px solid #ccc; Ama | j 回 ` DATM e FhtSW e 

font-size:l4px - » 
ada g Øm. Øm ØF x A-D 3e- mmn- 20 ID @- 


url (. ./images/nav_logo27. png) 


repeat-x 0 0 更 
字 泽 互联 国际 BBS SRE frase 作品 搜索 
本 相 本 bbs.wuyuze517.com 
Color;#03F ü 


border:lpx solid #06F; 
PE a- Aon > 


Æ 11-16 CSS 规则 (3) 图 11-17 预览 效果 (1) 


3. menu 区 域 的 制作 


O 切换 到 index. html 文档 中 ,在 “插入 ”面板 的 “常用 ”选项 卡 中 单 击 “ 插 入 Div 标签 ” 
按钮 ,弹出 “插入 Div 标签 "对话 框 ,参照 图 11-18 所 示 的 参数 设置 , 即 可 在 header 容器 后 
面 插入 名 为 menu 的 div 容器 。 

@ 根据 经 验 这 里 在 menu 容器 内 部 插入 一 组 无 序列 表 作为 盛 放 导 航 内 容 的 容器 , 具 
体 结构 代码 如 图 11-19 所 示 。 


插入 Div 标签 


"#"> 用 户 窜 录 </a></11> 
"#"> 帮 助 </a></1i> 


</div> 


图 11-18 插入 menu 容器 图 11-19 使 用 无 序列 表 制 作 导 航 
© 切换 到 div. css 文档 中 ,编写 相应 的 CSS 规则 ,具体 内 容 如 图 11-20 所 示 。 保 存 当 
前 文档 ,通过 浏览 器 预览 后 的 效果 如 图 11-21 所 示 。 
4. foruminfo 区 域 的 制作 


根据 之 前 对 页 面 的 规划 ,foruminfo( 论 坛 信息 ) 区 域 包含 userinfo( 用 户 信息 ) 和 
forumstats( 论 坛 统计 ) 两 大 部 分 。 
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height: 31px 
border: 1px solid #E2E2E2 
background: ##PF 

url(../images/menu_bg.gif) repeat-x 
padding-left: 20px; 


#mənu ul ( 
list-style: none 


float: left; [$ EMX - Windows Internet Explorer 
margin-right: Spx; — 
GO [e rMPHGSCSVISREMBN ( 2011) 一 -机械 v é X | 上 = Jer 
人 文件 0) MED www HRAN IAM Who 
text-decoration: none; 
display: block; RIRA b Dem- e WSSW e RES e =r 
width: 70px » 
sier Rai S-a m øm Øz x B-D O @- v- 220 I 上 0)- @- 
background 


url (../images/nenu_itenline. gif) 
no-repeat right center 
text-align: center 


potia teji sipi SEIU AKSU AKEH rare *mm APE? Wb 


1 | | =E óh 
Mil Ressees | 


ori f 


图 11-20 CSS 规则 (4) 图 11-21 预览 效果 (2) 


O 切换 到 index. html 文档 中 ,在 “插入 ”面板 的 “常用 ”选项 卡 中 单 击 “ 择 入 Div 标签 ” 
按钮 ,弹出 “插入 Div 标签 ”对 话 框 ,参照 图 11-22 所 示 的 参数 设置 , 即 可 在 menu 容器 后 面 
插入 名 为 foruminfo 的 div 容器 。 

© 使 用 类 似 的 方法 参照 图 11-23 所 示 的 参数 设置 , 即 可 在 foruminfo 容器 内 部 插入 


userinfo 容器 。 
r= r= 


MA: CHEZE M [div id="aenu"> M MA: | 在 开始 标签 之 后 M <div id="foruminfo v 
Ei ` — 类 ` 


ID: [forminfo ` —a- IN: [eaerinfe ` 


FR css 规则 FR css 规则 


11-22 插入 foruminfo 容器 11-23 ”插入 userinfo 容器 


© 在 userinfo 容器 内 部 插入 名 为 nav 的 div 容器 ,并 输入 相关 文字 内 容 。 在 nav 容 
器 后 面 创建 表单 元 素 , 并 在 其 中 依次 插入 文本 框 、 密 码 型 文本 框 和 按钮 表单 ,具体 结构 如 
图 11-24 所 示 。 

@ 切换 到 div. css 文档 中 ,编写 相应 的 CSS 规则 ,具体 内 容 如 图 11-25 所 示 。 保 存 当 
前 文档 ,通过 浏览 器 预览 后 的 效果 如 图 11-26 所 示 。 


#foruminfo 
width: 100%; 
overflow: hidden; 
margin: 10px 0; 


<div id="foruminfo*: color: #535353; 


#userinfo, #foruminfo #nav ( 
float: left; 
”value=" 用 户 名 "maxlength="40" padding-left: 5px; 


#userinfo #nav ( 
float:none; 
padding: 0; 

</div> 


图 11-24 页 面 结构 (2) 图 11-25 CSS 规则 (5) 
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C 无 标题 文档 - Windows Internet Explorer 


GO- [e rumimscevnsappt ci) —NEEERS v Q Xx [F 

XPD SED SEV BRAW IAM WO 

keer Baon e m2SW e 网 让 S 航 e Fr 

Ei] 本 e n 、 安 全 6) TRO - @- ” 


jilgz52am88s T 作品 搜索 


bbs.wuyuze517.com 


摄影 基础 。 摄影 培训 AREH 。 作品 下 载 。 免费 注册 MPER kiai 


CSS 论 坛 


wuleng ——— 
t 


图 11-26 预览 效果 (3) 


© 切换 到 index. html 文档 中 ,在 “插入 ”面板 的 “常用 ”选项 卡 中 单 击 “ 插 入 Div 标签 ” 
按钮 ,弹出 “插入 Div 标签 "对话 框 ,参照 图 11-27 所 示 的 参数 设置 , 即 可 在 userinfo 容器 
后 面 插入 名 为 forumstats 的 div 容器 。 

© 在 forumstats 容器 内 部 ,根据 实际 需要 输入 相关 文字 信息 ,并 使 用 em 标签 进行 
包 玩 ,以 便 后 期 能 够 对 文字 精确 控制 ,具体 结构 如 图 11-28 所 示 。 


WA Div 标签 


MA: [在 标 窒 之 后 M| [<div id"userinfo” M 
a: | ` 
m: [ermstas x 


新 建 css 规则 


>， 昨 日 ， <em>33</em>， 最 高 日 :<em> 
"> 精华 区 </a> <a title="Rss 订阅 全 
blank><img src="images/xml. gif” 
x: "12" 7></a> </p> 
<p> 主 题 ，<em>1188</em>， 帖 子 ，<em>11221</em>， 会 员 : 
<em>113102</em>, 欢迎 新 会 员 ，<a href="#">wuyuze</a></p> 
</div> 
</div> 


图 11-27 插入 forumstats 容器 11-28 页面 结构 (3) 


@ 切换 到 div. css 文档 中 ,编写 相应 的 CSS 规则 ,具体 内 容 如 图 11-29 所 示 。 保 存 当 
前 文档 ,通过 浏览 器 预览 后 的 效果 如 图 11-30 所 示 。 


H - Windows Internet Explorer 
* E r WYHIRSIT D VG GENRE (2011) 一 一 机 械 \ 本 大风 % v + X< 上 上 
xt RED EEV BRAW IAT) 帮助 00) 
kear | = ` e BEM e Mitsi e 区 
B- arrera ermm x A-D oS- nEn- 2207 I0 @- ” 
ji] z7525588s A tana 


bbs.wuyuze517.com 


Bum ARLU SESH 。 作品 下 载 。 免费 注册 。 用 户 登 录 Wb 


#forumstats 


7. 昨 日 : 33, 基 高 日 :81 MHE D 
float: right; 


F Ë. 113102 RIDER : wuyuze 
text-align: right; — 
padding-right: Spx; 


FEE 


图 11-29 CSS 规则 (6) 图 11-30 预览 效果 (4) 
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5. announcement 区 域 的 制作 


announcement 区 域 的 作用 是 滚动 显示 
论坛 发 出 的 公告 ,根据 实际 需要 拟 采用 无 序 
列表 实现 该 区 域 的 制作 。 

O 切换 到 index. html 文档 中 ,在 “搬入 ” 
面板 的 “常用 ?选项 卡 中 单 击 “插入 Div 标签 ” 
按钮 ,弹出 “插入 Div 标签 ”对 话 框 , 参 照 
图 11-31 所 示 的 参数 设置 , 即 可 在 foruminfo 
容器 后 面 插入 名 为 announcement 的 div 容器 。 


m: | 在 标签 之 后 
类 


ID: [wmounceaent 


图 11-31 插入 announcement 容器 


@ 在 announcement 容器 内 部 插入 announcementbody 容器 ,并 在 announcementbody 容 
器 内 部 使 用 无 序列 表 盛 放 公告 的 内 容 , 具 体 结构 如 图 11-32 所 示 o 


<div id="foruminfo"> 
<div 
</div> 
<div id="announcement "> 
<div id="announcementbody"> 
<ul> 
<li><a 
<li><a 
</ul> 
</div> 
</div> 


AERONA "222", 注意 度 的 把 握 <em> (2013-5-26) </em></a></1i> 
#"> 轻 轻轨 标 、 跟 帖 回复 支持 下 | <em> (2013-4-13)</em></a></1i> 


11-32 页 面 结 构 (4) 


@ 切换 到 div. css 文档 中 ,编写 相应 的 CSS 规则 ,具体 内 容 如 图 11-33 和 图 11-34 所 
示 。 保 存 当 前 文档 ,通过 浏览 器 预览 后 的 效果 如 图 11-35 所 示 。 


#anr ( 
p: lpx dashed #E2E2E2; 
ai ight: 36px; 
height: 36px; 
overflow: hidden; 
#announcementbody ( 


border: lpx solid #FFF; 
padding: 0 10px 

line-height: 35px !important; 
height: 36px 

overflow-y: hidden 


#announcementbody a ( 


color:#F00; ` 


Æ 11-33 CSS 规则 (7) 


标题 文档 - Windows Interne: 


float: 1 
margin-right: 20px 
padding-left: l0px; 
background: url(../images/arrow_right.gif) 
no-repeat 0 50%; 
white-space: nowrap; 


e: 0.83em 
margin-left: 5px; 
color: #535353; 


font 


11-34 CSS 规则 (8) 


E F.\ 教 村 编写 汇总 \ 前 导 案例 教程 《2011 ) —NER v 好 Xx |P 


XPO) REE) 查看 W) KÆRA IAM 帮助 00 
ker O = - DAIS e FhtSW e 


| 加 |- grm. erm. ém x la-a 本 æ- En- #$G)- Io- @- ” 


AKLIM ES EERMES 201252 


file: ///F AMRS E/M SEPRE (2011) 一 一 机 械 /配套 


A 11-35 预览 效果 (5) 
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6. 论坛 主体 部 分 的 制作 


由 于 论坛 主体 部 分 承担 着 罗列 显示 各 个 板块 信息 的 作用 ,信息 量 十 分 巨大 ,这 里 拟 采 
用 表格 作为 盛 放 数 据 的 容器 进行 制作 。 为 了 使 读者 清晰 地 和 弄 懂 各 个 容器 间 的 关系 ,这 里 
先 以 板块 的 某 一 部 分 进行 分 析 , 如 图 11-36 所 示 。 


论坛 板块 标 论坛 主体 容器 ， 拟 分别 应 用 单独 为 表格 的 标题 
nias mainbox 类 和 forumlist 类 进行 控制 元 系 创 建 CSS 规 则 
专题 活动 (赛事 发 者 专区 ) N HEME mM 


BW A Use) SA 1 


新 人 报道 
[aD] manam. urnan. Ear Wn 


bywuleng -2013-3-2608 43 


ME heMniee08 
Lu LLL 13 W `. 新 人 报道 
SAXE BAX 1AA 1274% m Wd 
版 主 : wufeng 


在 CSS 中 创建 新 的 类 ， 并 应 用 到 单元 
格 中 ， 使 得 应 用 该 类 的 单元 格 有 背景 
显示 ， 并 且 文 字 向 右 缩 进 一 定 的 距离 


11-36 论坛 主体 部 分 分 析 示意 图 


O 切换 到 index. html 文档 中 ,在 “插入 ”面板 的 “常用 ”选项 卡 中 单 击 “ 插 入 Div 标签 ” 按 
钮 ,弹出 “插入 Div 标签 ”对 话 框 ,在 “插入 ”下 拉 菜 单 中 选择 “在 标签 之 后 "选项 ,并 在 后 面 的 
下 拉 菜 单 中 选择 “二 div id= "announcement" 二 ”选项 ,在 “类 ”下 拉 列 表 框 中 输入 mainbox, 最 
后 单 击 “确定 ”按钮 , 即 可 在 announcement 容器 后 面 插入 应 用 mainbox 类 的 div 容器 。 

© 切换 到 *div. css” 文 档 中 ,编写 相应 的 CSS 规则 ,具体 内 容 如 图 11-37 所 示 。 

© 切换 到 “index. html” 文 档 中 ,在 应 用 mainbox 类 的 div 容器 内 部 创建 标题 和 相关 
文字 内 容 。 此 外 ,为 了 方便 地 对 mainbox 容器 中 的 各 种 元 素 进行 控制 ,也 使 结构 更 有 语 
义 , 这 里 增加 forumlist 类 共同 应 用 在 mainbox 容器 上 ,具体 的 结构 如 图 11-38 所 示 。 


<div id="announcement"> 
mainbox 1 

background: #FFF; 

border: lpx solid #C1C1C1; 


mainbox forumlist"> 


padding: lpx; <span class="headactions"> 分 区 版 主 : <a href="#">wf</a></span> 
margin-bottom: 8px; <h3><a href="#"> 专 题 活动 (赛事 发 布 专区 ) </a></h3> 
</div> 
11-37 CSS 规则 (9) 11-38 页 面 结构 (5) 


@ 切换 到 div. css 文档 中 ,编写 相应 的 CSS 规则 ,具体 内 容 如 图 11-39 所 示 。 保 存 当 
前 文档 ,通过 浏览 器 预览 后 的 效果 如 图 11-40 所 示 o 


headactions 
float: right; 
line-height: lem; 
padding: 10px 10px 0 0; ]EE 


- SG) 工具 D) - @- ” 


./images/forunbox_head. gif); 
background-repeat: repeat-x: 
background-position: 0 0; 
color: #D00; 


图 11-39 CSS 规则 (10) Æ 11-40 预览 效果 (6) 
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O 根据 实际 需要 ,此 板块 需要 创建 一 个 宽度 为 100%、 列 数 为 4\ 行 数 为 3 的 表格 。 
待 表格 创建 完成 后 ,需要 对 表格 内 部 的 多 个 元 素 进行 精确 控制 ,这 里 拟 采 用 类 的 方法 进行 
控制 ,为 了 更 加 明确 地 了 解 不 同 的 类 规则 作用 于 何 种 元 素 ,这 里 将 结构 代码 进行 分 析 , 如 
图 11-41 所 示 ,读者 可 以 参照 该 图 进行 制作 。 


类 定义 ses << 
主题 和 帖 数 列 外 观 tbody astpost 类 定义 最 后 发 表 列 的 外 观 


href="#"> 接 影 新 人 指导 (指示 牌 ) </ a><em> (今日 : 1) </em></h2> 
aE STRZ. > 


hrer="#">kelvinlee08</a></p>- 


ta 
"><a href= "fr 新 人 报 秆 </ay <citeyby <a href="#">wufeng</a> 


“ef="#" > 数码 大 师 双 月 滤 镜 摄影 大 赛 专区 </ a><em> </em></h2> 
s Da SIAE 12 月 大 赛 </P> 


>wufeng</a></p></ en 


无 新 由 时 的 外 观 w “last post "s <a 人 eetenoy 新 人 报道 c/ay caiteyby <a hrer="g"ywurangc/a> 
FB - 2013-3- +a: 
Cape 


图 11-41 表格 中 应 用 多 种 类 规则 的 解析 


@ 切换 到 div. css 文档 中 ,编写 相应 的 CSS 规则 ,具体 内 容 如 图 11-42 和 图 11-43 所 
示 所 示 ,保存 当前 文档 ,通过 浏览 器 预览 即 可 看 到 效果 。 


mainbox theae gory th, nums { 
mainbox theac ory td width: 80px; 


background: hoP; text-align: center; 
color: #FFF; ) 

) width: 260px; ) 

forumlist th | a ody th, .mainbox tbody td ( 
text-align: left; border-top: 1px solid #C1C1C1; 

1 padding: Spx; 

forumlist th | ) 
padding-left: 75px !important; forumlist tbody th ( 

) height: 40px; 


forumlist table padding-top: 8px 
border-collapse: separate; vertical-align:middle; 
) ) 
mainbox thead th, .mainbox thead td [ forumlist tbody tr th.new ( 
background: #407684; background: 
padding: 2px 5px; url (. ./images/forum_new.png) no-repeat 5px 
line-height: 22px; 50%; 
color: #535353; )/* 有 更 新 板块 图 标 */ 
' forumlist cite (display: Hoek? ) 
mainbox thead.category th.lanse( ,forunlist tbody tr th.none 
height:25px; background: ur1 (. een/ rotu, png) 
color: #FFF; no-repeat Spx 50%; 
) )7* 无 更 新 板块 图 标 */ 
图 11-42 CSS 规则 (11) Æ 11-43 CSS 规则 (12) 


© 根据 实际 需要 ,依次 创建 相同 结构 的 表格 即 可 实现 多 个 板块 区 域 的 制作 ,由 于 步 
骤 雷 同 ,这 里 不 再 歼 述 。 
@ 在 最 后 一 个 表格 的 后 面 插入 应 用 box 类 的 div 容器 ,作为 友情 链接 区 域 的 容器 。 
该 容器 内 部 插入 标题 以 及 相应 的 超 链接 即 可 ,如 图 11-44 所 示 。 切 换 到 div. css 文档 
中 ,编写 相应 的 CSS 规则 ,具体 内 容 如 图 11-45 所 示 。 
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background: #FFE; 

border: lpx solid #E2E2E2; 
padding: 2px; 
margin-bottom: 8px; 


<div class="box"> box h4 

<h4> 友 情 链接 </ha> padding: 0 10px; 

<a href="#">PHPiE 坛 </a><a href="#">PHPIË3S</a><a href="##">PHP 论 坛 </a> 
< "> 


#">PHPiC 坛 </a><a href margin-left:l5px; 


4" 
href= PHP 论坛 </a 
HP 论坛 </a> </div> 


="#">PHP 论 坛 </a><a 


图 11-44 页 面 结 构 (6) 图 11-45 CSS 规则 (13) 


© 切换 到 index. html 文档 中 ,在 “插入 ”面板 的 “常用 ”选项 卡 中 单 击 “ 插 入 Div 标签 ” 
按钮 ,弹出 “插入 Div 标签 ?对 话 框 ,在 “插入 ”下拉 菜单 中 选择 “在 标签 之 后 ”选项 ,并 在 后 
面 的 下 拉 菜 单 中 选择 “二 div id 二 "wrap" 记 ”选项 ,在 ID 下 拉 列 表 框 中 输入 footer, 最 后 单 
击 “ 确 定 ” 按 钮 , 即 可 在 wrap 容器 后 面 插入 名 为 footer 的 div 容器 。 

D 在 footer 容器 内 部 插入 版 权 信息 等 内 容 , 如 图 11-46 所 示 。 切 换 到 “div. css ”文档 
中 ,编写 相应 的 CSS 规则 ,具体 内 容 如 图 11-47 所 示 ,保存 当前 文档 ,通过 浏览 器 预览 即 可 
看 到 效果 。 


#toot 
abr tat 3px aolid #ciciet: 
background: #EE 
color: #535353 
padding: 12px 0 

#copyright 1 

font: 11px/1.5em Arial, Helvetica, 

sans-serif; 


#copyright st 


<div id="footer"> Tont- Te boldi 
<P id=copyright>Powered by <strong><a href="#" target= pran 3 ) 

互联 国际 </a></strong>-<strong><a href="#" target= blank>kBic/a NN ( 

strong> © 2012-2016 <a href="#" target=_blank> 优 秀 摄 影 作品 列表 < yA u color #09546; 


</div> 


Æ 11-46 ”页面 结构 (7) 11-47 CSS 规则 (14) 


此 ,论坛 首页 已 经 制作 完成 了 。 由 于 内 容 比 较 复杂 ,读者 可 以 参照 源 文 件 进行 制 
作 。 对 于 页 面 中 各 种 CSS 美化 规则 ,读者 可 以 根据 实际 需要 二 次 修改 。 


11.2.2 板块 内 容 列表 页 的 实现 


板块 内 容 列表 页 指 的 是 论坛 的 二 级 页 面 , 对 于 该 类 页 面 来 讲 主要 显示 的 是 板块 中 各 
种 帖子 的 主题 ,以 及 该 帖子 最 后 回复 的 时 间 和 作者 等 信息 。 从 页 面 布局 角度 来 讲 , 二 级 页 
面 顶 部 大 部 分 区 域 与 主页 内 容 相同 ,不 同 的 仅 是 罗列 帖子 的 列表 ,对 于 这 种 信息 量 非常 大 
这 里 拟 采 用 表格 作为 盛 放 数据 的 容器 。 由 于 页 面 与 主页 类 似 , 这 里 仅 介绍 与 

页 不 同 区 域 的 布局 实现 。 


1. 创建 二 级 页 面 


O 论坛 主页 index. html 制作 完成 后 ,读者 可 以 将 该 页 面 保存 为 模板 ,利用 模板 创建 
二 级 页 面 ,也 可 以 将 该 页 面 直接 另存 为 二 级 页 面 。 这 里 直接 将 主页 另存 为 listu html, 
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@ 在 list. html 页 面 中 ,删除 foruminfo 容器 内 部 及 其 他 无 用 容器 ,此 时 的 页 面 结构 
如 图 11-48 所 示 , 在 此 基础 上 完成 二 级 页 面 的 制作 。 

© 在 foruminfo 容器 内 部 插入 名 为 nav 的 div 容器 ,并 在 该 容器 内 部 创建 相关 文字 
内 容 , 具 体 结构 如 图 11-49 所 示 。 由 于 nav 容器 所 对 应 的 CSS 规则 在 制作 主页 时 已 经 编 
写 完成 ,所 以 当 插 入 文字 内 容 后 , 即 可 看 到 最 终 效 果 。 


<body> 
<div id="wrap"> 
<div i ader"> 


<div id="menu"> 


</div> 
<div ias ER> 


</div> 
<div class="box"> 


<h4>ZE... < / div> <div id="foruminfo"> 


</div> <div id="nav"> 


<div id="footer"> <PRE> B AWNEIRR PISESEA SIL </p> 
Ep id=c... <p> 版 主 ，<a href="#">wufeng</a></p> 

</div> </div> 

</body> </div> 


图 11-48 页 面 结 构 (8) 图 11-49 插入 新 元 素 


@ 在 list. html 文档 中 ,在 “插入 ?面板 的 “常用 ”选项 卡 中 单 击 “搬入 Div 标签 ?按钮 ， 
弹出 “插入 Div 标签 ”对 话 框 ,参照 图 11-50 所 示 的 参数 设置 , 即 可 在 foruminfo 容器 后 面 
插入 应 用 pages_btns 类 的 div 容器 。 

© 用 类 似 的 操作 方法 ,在 pages_btns 容器 内 部 ,创建 应 用 pages 类 的 div 容器 ,并 在 
其 内 部 输入 多 个 数字 ,此 时 的 页 面 结构 如 图 11-51 所 示 。 


WA Div 标签 


m: [60225 
É [paces btas ` 


M| [<div id=” forusinfo V 


m: [ ` 
FR css 规则 


</div> 


11-50 插入 应 用 pages_btns 类 的 div 容器 11-51 页 面 结构 (9) 


© 切换 到 div. css 文档 中 ,编写 相应 的 CSS 规则 ,具体 内 容 如 图 11-52 和 图 11-53 所 示 。 


padding: 0 0 Bpx; 
overflow: hidden; 


ges_btns( 
line-height: 26px; 


pages a ( 
float: left; 
padding: 0 8px: 
line-height: 26px; 


pages ( 
float: left; 
border: lpx solid #E2E2E2; 


background: #F5F5F0; 
height: 24px; 
line-height: 26px; 
color: #535353; 
overflow: hidden; 


图 11-52 CSS 规则 (15) 
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next 
line-height: 24px: 
font-family: Verdana, 

Arial, Helvetica, sans-serif; 


Æ 11-53 CSS 规则 (16) 
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© 在 应 用 pages 类 的 div 容器 后 面 ,使 用 span 元 素 包 庄 图 像 链接 ,作为 “发 新 帖 ” 的 
图 标 按钮 ,具体 页 面 结构 如 图 11-54 所 示 。 切 换 到 div. css 文档 中 ,编写 相应 的 CSS 规则 ， 
如 图 11-55 所 示 。 


postbtn 1 
<div class="pages btns"> float: right; 


<div class="pages">a href...J</div> margin-left: 10px; 
<span class="postbtn"><a href="#"><img src= cursor: pointer; 


"images/newtopic. gif” width="73" height="29" /></a></span></div> 


图 11-54 ”页面 结 构 (10) 图 11-55 CSS 规则 (17) 


@ 保存 当前 文档 ,通过 浏览 器 预览 后 的 效果 如 图 11-56 所 示 。 


TORR Øm A-D S @- En- 207 Io @- ”| 


A 


` 
su Ü | 


11-56 ”预览 效果 (7) 


2. 二 级 页 面 中 帖子 列表 的 实现 


与 论坛 主页 相同 的 是 ,二 级 页 面 中 帖子 列表 部 分 的 实现 同样 采用 表格 作为 容器 进行 
制作 。 与 论坛 主页 不 同 的 是 ,帖子 列表 内 容 要 针对 “普通 帖子 "和 “火爆 帖子 ”等 不 同类 型 
的 帖子 加 以 区 分 ,这 里 拟 采 用 不 同 的 图 像 进行 区 分 显示 。 

O 将 鼠标 定位 在 图 11-54 中 代码 的 最 后 面 , 然 后 在 “插入 ”面板 的 “常用 ”选项 卡 中 单 
击 “ 插 入 Div 标签 "按钮 ,弹出 “插入 Div 标签 "对话 框 ,在 “插入 ”下 拉 菜 单 中 选择 “在 插入 
点 ”选项 ,在 “类 ”下 拉 列 表 框 中 选择 mainbox 选项 ,最 后 单 击 “ 确 定 ” 按 钮 , 即 可 插入 应 用 
mainbox 类 的 div 容器 。 

© 为 了 方便 对 二 级 页 面 中 表格 元 素 进行 控制 ,这 里 为 盛 放 表 格 的 外 围 容器 增加 
threadlist 类 ,并 将 其 应 用 在 刚刚 创建 的 div 容器 中 ,具体 代码 如 图 11-57 所 示 。 由 于 此 部 
分 的 结构 与 主页 相同 ,所 以 不 需要 再 次 编写 CSS 规则 , 当 创建 完成 后 即 可 看 到 效果 。 

piep in MEE ><span class="headactions"> 


<h3><a href="#"> 专 题 活 动 (赛事 发 布 专区 ) </a></h3> 
</div> 


11-57 页 面 结构 (11) 


@ 考虑 到 帖子 列表 中 的 内 容 非 常 多 ,这 里 首先 创建 较为 简单 的 表格 。 将 鼠标 定位 在 
图 11-58 中 “一 /h3 之 ”的 后 面 , 插 入 一 个 宽度 为 100% ,边框 为 0. 行 数 为 3、 列 数 为 5 的 表 
格 ,其 结构 如 图 11-58 所 示 。 

@ 为 了 统一 论坛 整体 风格 ,二 级 页 面 采 用 类 似 主 页 表格 的 效果 。 切 换 到 div. css X 
档 中 ,编写 相应 的 CSS 规则 ,如 图 11-59 所 示 。 
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<table width=”100%" borde 


category"> 


.threadlist table ( 
作者 </td> border-collapse: separate; 
"nums "> 回复 /查看 </ta> ' 


"lastpost "> 最 后 发 表 </td> tbody th, 


tbody td ( 
#535353; 

padding: 1px Spx; 
border-bottom: lpx solid #FFF; 
background-color: #FEE; 


-threadlist th { 
text-align: left; 

1 

,threadlist td.folder ( 
text-align: center; 
width: 30px; 

' 

threadlist td.author ( 
width: 120px; 

' 

threadlist td.lastpost ( 
text-align: right; 
width: 160px; 
padding-right: 15px; 


图 11-58 页 面 结构 (12) Æ 11-59 CSS 规则 (18) 


@ 根据 需要 修改 二 tr 二 标签 内 部 的 结构 ,并 添加 相关 图 像 , 如 图 11-60 所 示 。 


pacing="0" 


td class="folder"><img src= 
"images/folder_conmon. gif”" width="18" height="25" /></td 
th> 论坛 公告 : <a href="#" target="”_blank">css 论 
坛 放宽 "签名 ", 注意 度 的 把 所 </ a></th 
td class="author"><cite><A href="#">yuze517</A> 
</cite> <em>2013-5-26</em></ td> 
td class="nums">-</td> 
"lastpost ">-</ta> 


11-60 ”修改 二 tr 二 标签 内 部 的 结构 


@ 在 表格 内 修改 第 三 行 二 tr 二 标签 内 部 的 结构 ,并 添加 相关 图 像 ,如 图 11-61 所 示 。 


tr 

td class="folder"><img src="inages/folder_hot. gif” width 
hot "><label>cing arc="inages/pin, 3.9if" widti 1> 
blanky2013 年 9 月 、10 月 要 事 地 区 </A><sPan class="threadpages">ánbsp; <A href="#">1</A> 
<A href="#">2</A> <A hret="8">3Z/A><A hraf="#">4</A><A href="#">5</A></span></th 

<td class="author"><cite><A href="#">yuze517</A></cite> <em>2013-5-26</em></td: 

numa "><storg>385</storg> / <em>15864</em></td> 
lastpost"><en><A href="#">2013-3-19 14:11</A></em> <cite>by <A href="#">wf</A></cite></td> 


<th cla: 


<A href="#" targi 


11-61 修改 第 三 行 <tr 之 标签 内 部 的 结构 


© 切换 到 div. css 文档 中 ,编写 相应 的 CSS 规则 .如 图 11-62 所 示 。 保 存 当前 文档 ， 
通过 浏览 器 预览 后 的 效果 如 图 11-63 所 示 。 
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.threadlist cite ( 
display: block 


,threadlist th label { 
float: right; 

) 

„hot a 

color:#F00; 

tewt-decoration:underline; 

) 

‘threadpages 


GO “e r WHWSCSVISSMEE D — AEEA aosi tr x A 


background: 
url (. ./images/nultipage. gif) XRD RED saw QARO IRM #Mw 
no-repeat 0 100$; kerr m -D o m- mv. 220. IARO- @- ” 
font-size: 11px; 
margin-left: 5px; CRRORSEStE) HENE M 
white-space: nowrap; 
| | 
threadpage' 


padding-left: 8px; 
2013349361 
byw 


,nums storg ( 
color:#F00; 
) 


11-62 CSS 规则 (19) 11-63 预览 效果 (8) 


至 此 ,二 级 页 面 中 帖子 列表 最 基本 的 外 观 已 经 实现 ,读者 可 以 直接 复制 对 应 的 标签 粘 
贴 在 后 面 , 以 便 快 速生 成 多 个 列表 内 容 。 


11.2.3 论坛 详细 内 容 页 的 实现 


论坛 详细 内 容 页 是 论坛 的 三 级 页 面 , 主 要 显示 的 是 帖子 的 详细 内 容 ,以 及 用 户 回帖 的 
信息 。 在 该 页 面 中 除了 要 显示 发 帖 人 各 种 信息 ,还 要 显示 回复 人 的 个 人 信息 。 由 于 该 页 
面 顶部 区 域 与 主页 相同 ,这 里 仅 介绍 与 主页 不 同 区 域 的 布局 实现 ,请 读者 在 参考 源 文件 的 
基础 上 独立 完成 页 面 的 制作 。 


1. 创建 三 级 页 面 


O 论坛 二 级 页 面 list. html 制作 完成 后 ,将 该 页 面 男 存 为 contentpage. html, 
@ 在 contentpage. html 页 面 中 ,删除 pages_btns 容器 内 部 的 内 容 , 以 及 其 他 无 用 容 
器 。 在 pages_btns 容器 内 部 新 增 应 用 threadflow 类 的 div 容器 ,以 及 应 用 postbtn 类 的 
span 标签 ,具体 结构 如 图 11-64 所 示 。 
用 于 实现 下 一 页 的 翻 页 效果 用 于 实现 切换 主题 


Cdiv class="pages_btns"> 


上 一 主题 </ 5 "> 下 一 主题 ></a></div> 


* /></a></span> 
></a></span></div> 


用 于 盛 放 “新 帖 ” 和 “回复 ”的 图 像 按 钮 
图 11-64 页 面 结 构 (13) 


© 切换 到 div. css 文档 中 ,编写 相应 的 CSS 规则 ,如 图 11-65 所 示 。 保 存 当 前 文档 ， 
通过 浏览 器 预览 后 的 效果 如 图 11-66 所 示 。 
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.threadflow [ 
float: left; 
border: lpx solid #E2E2E2; 
background: #F5F5F0; 
height: 24px; 
line-height: 26px; 
color: 8535353; E HEECS RIENE COL) — SUR MPEFN AOSE cont E [tr] X | 
overflow: hidden; #80 

a -D >- man- s20- IAM- @- 


margin- Yigit Bai 
padding: 0 5p: 


图 11-65 CSS 规则 (20) 图 11-66 预览 效果 (9) 


2. 三 级 页 面 主体 部 分 的 制作 


O 在 应 用 pages_btns 类 div 容器 的 后 面 插入 应 用 mainbox 类 的 div 容器 ,作为 三 级 


页 面 主体 部 分 的 外 包 庄 。 
@ 与 主页 和 二 级 页 面 创 建 的 方式 相同 ,这 里 为 了 方便 控制 其 内 部 的 元 素 , 为 刚刚 创 
建 的 div 再 次 增加 viewthread 类 ,如 图 11-67 所 示 。 


<div class="pages_ptns">[<div ee]</div> 

<div clas: inbox viewthread"> 
<span c: "headactions"><a href="#"> 打 印 </a></span> 
<h3><a href="#"> 摄 影 之 稻 </a></h3> 

</div> 


11-67 页 面 结构 (14) 


© 将 鼠标 定位 在 图 11-67 中 二 /h3 二 的 后 面 ,插入 2 行 2 列 的 表格 。 为 使 读者 理解 表 
格 中 各 种 元 素 所 对 应 的 类 规则 ,这 里 以 示意 图 的 形式 向 读者 展示 ,如 图 11-68 所 示 。 具 体 
结构 代码 如 图 11-69 所 示 ,由 于 所 涉及 的 CSS 规则 较 多 ,这 里 不 再 一 一 演示 ,请 读者 查阅 
源 文件 进行 制作 。 


postauthor 类 一 bai gi 二 2 postcontent 类 
人 人 postinfo 类 


postmessage 类 


avatar 类 一 | 


buddy% 
pm% 
rewards 类 一 一 
offline 类 


unD E me 
Foes Sau 


d. 9862558, re 


postcontent 类 


= postactions 类 


图 11-68 示意 图 
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table width=”100%” bord 
<tbody: 
<tr: 
<td c. "postauthor"><cite><A href="#" target="_blank">divcss5</A></cite> 
<div class="avatar"><img src="images/noavatar middle.gif" width="120" height="120" /></div> 
<p><em> 管 理 员 </em></p> 
<p><img src="images/star_level3.gif" wid 
<img src="images/star_level3. gif” width= 
<img src="images/star_levell.gif” width="16" height="16" /></p> 
<ul> 
<li class="pm"><a href="#"> 发 短 消 息 </a></1i> 
<li class="buddy"><a href="#"> 加 为 好 友 </a></1i> 
<li class="rewards"><a href="#9"> 获 得 奖赏 </a></1i> 
<li class="offline"><a href="#"> 当 前 离线 </a></1i> 
</ul></td 
ass="postcontent" 
="postinfo"> <strong title=" 复 制 帖 子 链接 到 前 贴 板 ">l<sup>#</sup></strong> 
<em> 大 </em> <em > 中 </em> <em> 小 </em> 发 表 于 2013-4-10 11: 08snbsp; <A href="#"> 只 看 该 作者 </A></div> 
<div class="postmessage"> 
<h2> 行 摄 无 疆 一 摄影 之 旅 </h2> 
<div class="t_msgfont"> 阳 要 三 月 ， 天王 :|<br /> 


cellspacing: ellpaddi 


<br /> 


"postauthor">snbsp;</td 

"postcontent"><div class="postactions"> 
<p><strong>TOp</strong> </p> 

</div></td 


11-69 ”页 面 结构 (15) 


至 此 ,论坛 的 主页 、 帖 子 列表 页 和 详细 内 容 页 三 种 页 面 的 布局 已 经 基本 制作 完成 , 读 
者 可 以 使 用 页 面 中 结构 相同 的 代码 快速 实现 页 面 其 他 区 域 的 布局 。 


13 实 训 


1. RIER 
利用 之 前 所 讲授 的 切片 知识 ,依据 PSD 源 文件 制作 论坛 的 静态 页 面 。 
2. 过 程 指导 


D 打开 PSD 源 文件 ,仔细 观察 效果 图 的 布局 分 布 。 

© 启动 Dreamweaver CS5 创建 站 点 ,并 创建 index. html 页 面 和 div. css 文件 。 
© 根据 需要 从 PSD 源 文件 中 进行 切片 ,并 进行 输出 。 

@ 参照 图 11-70 一 图 11-72 所 示 的 效果 图 ,完成 论坛 三 个 典型 页 面 的 制作 。 
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+B: 114 | BEB: 497 | 帖子 736667 | SM: 480718 | TEIE: Kyhpuddng G EpiS 


2011 年 QS 全球 大 学 专业 排 名 一 计 … 


TESO 10 为 各 而 十 各 和 


CERI RATE ETEMAH + 


FM: AMENS, RARESA, BREESE 5354 1470 .; 
MERS RŽ 19500467 


RERA [1 

tip: E), BAN, Burr, TE, 法 国 , ERE, Rt, Et, RPN, 新 加 法 , E, ME, F 
E 妃 采 西亚 , 南非 

BENE 


MPO 


EER, COMGE, MEPMIA, ABEE, EILSET. 3364 10271 
mr: nus 


1276/272 


图 11-70 论坛 主页 效果 图 


MEBEL- 全 部 时 间 。 排序 : 最 后 发 表 MP NF 

会 mis “mipipayh JU” 20122: DR K AJF 6 ... 2 

会 图 学 行业 顶级 沙龙 一 offer 之 夜 ! — 6 tema E …2 3 

会 【公告 〗】 鲜 国学 网 侵权 声明 2 

会 加 入 版 主 志愿 者 团队 ， 互 助 分 享 ， 收 获 留 学 梦想 与 夸 长 ~9 .….2 3 4 5 6 
MAEDA 

h 新 手 报到 New 

Ë 新 手 报到 new 

Ë 新 手 报到 new 

Ë 新 手 报到 New 

Ë 报到 来 了 New 

És FRH Wew 


11-71 论坛 二 级 页 面 效 果 图 
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CO 


osa: 国 回回 四 o :长 kk y 


E27 TE Peno ameams MAFIA 


11-72 论坛 三 级 页 面 效果 图 


114 7J 题 


1. 常见 的 论坛 主要 分 为 哪些 类 别 ? 
2. 论坛 的 经 营 对 商家 有 哪些 好 处 ? 
3. 主流 的 论坛 程序 有 哪些 ? 
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口 了 解 电 子 商 务 类 网 站 的 基本 概念 。 

口 掌握 网 站 规划 设计 与 布局 分 析 的 方法 。 

口 能 够 依据 布局 示意 图 细 化 页 面 布局 。 

自 网 上 购物 成 为 当今 社会 比较 流行 的 购物 方式 以 来 ,各 类 电子 商务 网 站 层出不穷 , 常 
见 的 电子 商务 模式 有 B2B( 企 业 对 企业 之 间 的 营销 ) 和 B2C( 企 业 对 客户 之 间 的 营销 ) 两 大 
类 ,但 无 论 哪 一 类 模式 ,都 给 企业 带 来 了 无 限 商 机 。 本 章 主要 向 读者 介绍 电子 商务 类 网 站 的 
设计 与 实现 方法 ,重点 对 静态 页 面 的 布局 加 以 介绍 ,至 于 页 面 编程 部 分 这 里 不 再 深入 讲解 。 


121 规划 与 分 析 


目前 ,很 多 大 型 企业 已 经 开始 借助 互联 网 的 力量 ,建立 部 署 自己 的 网 络 交易 平台 p 
给 企业 带 来 无 限 商机 ,同时 也 实现 了 对 信息 的 有 效 控制 。 此 外 ,对 市 场 的 预测 也 更 加 科学 
准确 ,提高 了 企业 的 市 场 竞争 能 力 。 本 节 以 “ 宇 泽 蛋 糕 网 ”作为 电子 商务 类 网 站 的 代表 进 
行 分 析 , 希 望 通过 这 种 方式 使 得 读者 能 够 了 解 此 类 网 站 从 设计 到 实现 的 具体 过 程 。 


12.1.1 规划 设计 


1. 网 站 建设 背景 


随 着 市 场 销售 模式 的 更 蔡 , 以 及 市 场 需求 的 变化 趋势 ,本 网 站 立足 于 食品 消费 类 行 
业 ,提供 在 线 订 购 蛋 糕 为 首 的 核心 业务 ,并 收录 全 国 范围 内 加 盟 销 售 的 蛋糕 店 信息 。 为 消 
费 者 提供 最 快捷 、 最 全 面 的 订购 信息 ,并 提供 网 上 订购 服务 。 


2. 面向 客户 群体 


网 站 中 所 销售 的 各 类 和 蛋糕 产品 面向 广大 中 青年 消费 者 ,以 及 各 地 加 盟 经 销 商 ,通过 网 站 
提供 的 在 线 订购 功能 ,用 户 可 以 异地 订购 蛋糕 。 网 站 还 与 B2B 和 B2C 模式 的 网 上 购物 网 站 合 
作 , 帮 助 用 户 通过 本 网 站 找到 信赖 的 购物 网 站 ,同时 也 为 这 些 网 站 提供 了 高 效率 的 点 击 用 户 。 


3. 盈利 模式 
。 网 站 提供 网 上 购物 服务 。 网 站 作为 中 介 者 为 消费 者 提供 网 上 购物 服务 ,为 加 盟 商 
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Iz 


提供 网 上 销售 服务 , 即 在 消费 者 决定 购买 产品 后 ,可 以 在 网 站 直接 付费 购买 ,网 站 
收取 服务 费 。 

网 站 可 以 推出 VIP 加 盟 商 计划 。VIP 加 盟 商 将 获得 主页 的 部 分 空间 ,用 于 发 布 产 
品 信息 。 此 外 ,还 可 以 指定 与 公司 相对 应 的 关键 词 ,用 户 搜 索 这 些 关键 词 时 便 可 
跳 转 到 加 盟 商 的 页 面 。 

出 售 经 销 商 信息 展位 。 对 首页 部 分 广告 位 进行 竞价 排 位 ,对 子 页 面 经 销 商 免费 。 

点 击 收费 。 加 盟 商 可 以 将 自己 的 产品 放置 在 特定 的 网 页 链接 内 ,网 站 将 根据 这 个 
链接 的 点 击 次 数 收取 费用 。 


4. 网 站 功能 结构 


° 种 类 显示 。 当 单 击 某 个 具体 的 类 别 后 ,就 能 显示 具体 的 产品 信息 。 

查询 。 用 户 可 以 利用 该 功能 查询 需要 的 产品 。 

最 新 商品 。 根 据 网 站 的 动态 管理 ,可 以 将 电子 商务 网 站 中 的 新 商品 放 入 一 张 列表 
中 显示 出 来 ,供用 户 参 考 和 购买 。 

”促销 产品 列表 。 网 站 可 以 实施 自己 的 购销 计划 ,通过 此 功能 用 户 可 以 查看 促销 产品 。 
。 购买 流程 。 用 户 通过 此 功能 ,了 解 网 站 的 购买 流程 。 

购物 车 。 用 户 所 订购 的 商品 都 要 经 过 购物 车 环节 才能 真正 购买 成 功 。 

。 注册 和 登录 。 用 户 想 要 购买 产品 ,必须 先 登 录 网 站 并 注册 为 会 员 。 

。 个 人 信息 。 注 册 为 会 员 后 ,可 以 通过 该 功能 查看 订单 查看 资料 和 查看 购物 车 等 。 


1.2 布局 分 析 


“ 宇 泽 蛋 糕 网 ”是 以 在 线 销售 蛋糕 为 主 的 购物 平台 ,主要 包括 主页 面 、 搜 索 页 面 和 产品 


详细 信息 页 面 三 部 分 ,本 示例 针对 这 三 个 页 面 进行 分 析 。 


1. 主页 面 布局 规划 
主页 面 应 该 包括 网 站 的 Logo FA ,产品 搜索 框 .个 人 账户 链接 .产品 分 类 .部 分 产品 


推荐 ,以 及 广告 位 等 栏目 。 通 过 成 熟 的 构思 与 设计 ,“ 宇 泽 蛋 糕 网 ”主页 面 最 终 效 果 如 
图 12-1 所 示 , 布 局 示意 图 如 图 12-2 所 示 。 


2. 搜索 页 面 布 局 规划 
搜索 页 面 是 访问 者 在 搜索 栏 中 输入 关键 字 后 ,通过 系统 搜索 找 出 符合 条 件 的 产品 列 


表 页 面 。 通 过 成 熟 的 构思 与 设计 ,“ 宇 泽 蛋 糕 网 ”搜索 页 面 最 终 效果 如 图 12-3 所 示 , 布 局 
示意 图 如 图 12-4 所 示 。 


产品 


3. 产品 详细 信息 页 面 布局 规划 


产品 详细 信息 页 面 是 访问 者 查看 具体 产品 时 显示 的 页 面 ,在 此 页 面 中 还 将 增加 相似 
列表 以 及 推荐 产品 列表 ,以 方便 访问 者 选择 合适 的 产品 。 通 过 成 熟 的 构思 与 设计 ， 


“ 宇 泽 蛋 糕 网 ”产品 详细 信息 页 面 最 终 效 果 如 图 12-5 所 示 ,布局 示意 图 如 图 12-6 所 示 。 
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12-1 “ 宇 泽 蛋 糕 网 ”主页 面 最 终 效 果 
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header 
main_content 
menu_tab 
Crumb navigation 
left_content center_content right_content 
title_ box 类 title_ box 类 
left_menu 类 oferta 类 border_box 类 
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图 12-2 主页 面 布局 示意 图 
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12-3 ”搜索 页 页 面 最 终 效果 


main_container 


header 
main_content 
menu tab 
crumb_navigation 
left_content flow_list 
title_box 类 flow_list_title_bar 3 
left_menu 类 


prod_box 类 || prod_box 类 || prod_box 类 || prod_box 类 


flow_list_title_bar 类 


title_box 类 
border_box 类 prod_box 类 || prod_box 类 | | prod_box 类 || prod_box 类 
title _ box 区 
border_box 类 prod_box 类 || prod_box 类 | | prod_box 类 || prod_box 类 


banner_adds 3: 


prod_box 类 || prod_box 类 || prod_box 类 || prod_box 类 


pagination 类 
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124 搜索 页 页 面 布局 示意 图 
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12-5 产品 详细 信息 页 面 最 终 效果 


main_container 


header 
main_content 
menu_tab 
crumb_navigation 
left_content center_content right_content 
[ tile box% ] prod box_big 类 title_box 类 
border_box 类 border_box 类 
product_img_big 类 details_big_box 类 shopping cart] 
title_box 类 
border_box 类 = title_box 类 
jieshao 
- = border_bo; 
title_box 类 congtent_jieshao 类 ee 
border_box 类 
title_box 类 
title box left menis 
border_box 类 
center title_bar 类 
i 了 ' banner_adds 类 
prod_box 类 || prod_box% | | prod_box 类 


footer 
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122 设计 与 实现 


在 制作 页 面 之 前 ,首先 定义 站 点 ,以 方便 对 站 点 内 文件 进行 管理 和 操作 。 其 次 在 站 点 
中 创建 images 和 style 两 个 文件 夹 , 用 于 放置 图 片 和 样式 文件 。 最 后 新 建 index. html 文 
档 和 div. css 文档 ,并 将 两 个 文档 链接 起 来 。 在 完成 了 这 些 准 备 工 作 以 后 ,下 面 分 别 对 各 
个 页 面 的 布局 实现 进行 讲解 。 


12.2.1 主页 面 的 布局 实现 


1. 页 面 头 部 区 域 的 制作 


O 在 div. css 文件 中 ,创建 初始 化 CSS 规则 ,如 图 12-7 所 示 。 

© 将 光标 置 于 设计 视图 中 ,在 “插入 ”面板 的 “常用 ”选项 卡 中 单 击 “ 插 入 Div 标签 ” 按 
钮 国 ,弹出 “插入 Div 标签 ”对 话 框 ,在 “插入 ”下 拉 菜 单 中 选择 “在 插入 点 ”选项 ,在 ID 下 拉 
列表 框 中 输入 main_container, 最 后 单 击 “ 确 定 ” 按 钮 , 即 可 在 页 面 中 插入 main_container 
容器 。 切 换 到 div. css 文件 中 ,创建 一 个 名 为 并 main_container 的 CSS 规则 ,如 图 12-8 
所 示 。 


margin:0; 
padding:0; 
} 
body { 
background: #FFF url(../images/bg.jpg) 
no-repeat center top ; 
padding: 0; 
font-family:Arial, Helvetica, sans-serif; 
font-size:12px; 
margin: 0PX auto auto auto; 


color:#000; 
} 
pl #main_container ( 
padding: 2px; width: 1000px; 
margin: 0px; height:auto; 
) margin:auto; 
img( padding: 0px; 
border:0; background-color:#FFF; 
) 
12-7 body 标签 和 p 标签 的 CSS 规则 图 12-8 名 为 并 main_container 的 CSS 规则 


O 删除 多 余 的 文字 ,在 main_container 容器 内 部 插入 一 个 名 为 header 的 div 容器 ， 
并 在 div. css 文件 中 ,创建 名 为 井 header 的 CSS 规则 ,如 图 12-9 所 示 。 切 换 回 设计 页 面 ， 
页 面 效 果 如 图 12-10 所 示 。 gesen t 

@ 同样 的 方法 ,在 header 容器 内 部 插入 一 个 名 height: 136px; 

为 top right 的 div 容器 ,如 图 12-11 所 示 。 切换 到 Sectgrouns positioniopx bp 


div. css 文件 中 ,创建 一 个 名 为 #top_right 的 CSS 规 N 
则 ,如 图 12-12 所 示 。 图 12-9 名 为 # header 的 CSS 规则 
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12-10 应 用 样式 后 的 效果 (1) 


在 开始 标签 之 后 m| [<div id="header"> w 


v 


top_rieht v 


#top_right ( 

E css 规则 Width: 728px; 
float:right; 
text-align:right; 
padding-right :20px; 


12-11 插入 top_right 容器 图 12-12 ”名 为 # top right 的 CSS 规则 


© 切换 到 代码 视图 ,在 二 div id 二 "top_right" 二 内 部 增加 相应 的 标签 ,如 图 12-13 所 
示 。 切 换 到 div. ess 文件 中 ,创建 一 个 名 为 # top_right span 的 CSS 规则 ,如 图 12-14 
所 示 。 


<div id="top_right"><a hre: 
我 的 账户 </a><span>1</span><a 
付款 方式 </a><span>1</span><a hre: 
配送 范围 </a><span>1</span><a hre 
帮助 中 心 </a><span>1</span> 订 花 热 线 
400-686-1234</div> 


> 
> #top_right span ( 

> padding-left: Spx; 
padding-right:Spx; 


12-13 ”增加 相应 的 标签 12-14 名 为 #top_right span 的 CSS 规则 


© 将 鼠标 定位 在 top_right 容器 结束 标签 的 前 面 , 在 “插入 ?面板 的 “常用 ”选项 卡 中 
单 击 “插入 Div 标签 按钮 国 ,弹出 “插入 Div 标签 ?对话 框 ,在 “插入 ”下拉 菜单 中 选择 “在 
插入 点 ?选项 ,在 ID 下 拉 列 表 框 中 输入 big_banner, 最 后 单 击 “ 确 定 ” 按 钮 , 即 可 在 页 面 中 
插入 big_banner 容器 ,如 图 12-15 所 示 。 在 二 div id 二 "big_banner" 放 标签 内 部 插入 相关 
的 广告 图 片 ,其 结构 代码 如 图 12-16 所 示 。 

切换 到 div. css 文件 中 ,创建 一 个 名 为 ## big_banner 的 CSS 规则 ,如 图 12-17 所 示 。 
返回 设计 页 面 ,页 面 效 果 如 图 12-18 所 示 。 


260 


第 1238 电子 商务 类 网 站 的 设计 与 实现 


<div id="top_right"><a href= 
我 的 账户 </a><span>1</span><a hri 
付款 方式 </a><span>1</span><a hri 
配送 范围 </a><span>1</span><a href="#"> 
帮助 中 心 </a><span>1</span> 订 购 热线 
:400-686-1234 

<div id="big banner"><img src= 
"images/banner top.jpg" width="730" 
height="104" /></div> 

</div> 


图 12-15 在 big_banner 容器 内 插入 图 片 图 12-16 名 为 #big_banner 的 CSS 规则 (1) 


unta P | HEIR | CEAN | Sy Q: | V 400-686-1234 
ig_banner À sg 金牛 VS 双子 nan "° 
“mu GOME. 


图 12-17 名 为 # big_banner 12-18 应 用 样式 后 的 效果 (2) 
的 CSS 规则 (2) 


D 将 鼠标 定位 在 设计 视图 中 , 单 击 “ 插 入 ”面板 的 “插入 Div 标签 ”按钮 国 ,弹出 “ 插 
A Div 标签 ”对 话 框 ,在 “插入 ”下 拉 菜 单 中 选择 “在 标签 之 后 ”选项 ,并 在 其 后 方 下 拉 菜 单 
中 选择 “二 div id 二 "top_right" 记 ”选项 ,在 ID 下 拉 列 表 框 中 输入 logo, 最 后 单 击 “ 确 定 ” 按 
钮 , 即 可 在 top_right 容器 后 面 插入 logo 容器 。 

紧 接 着 ,在 logo 容器 内 部 插入 名 为 “logo. gif” 的 图 片 .然后 在 div. css 文件 中 ,创建 一 
个 名 为 #logo 的 CSS 规则 ,如 图 12-19 所 示 。 返 回 设计 页 面 ,此 时 页 面 效果 如 图 12-20 
所 示 。 


#logo t 

float:left; 

padding:40px 0 0 30px; 
中 国 煤 烙 食 品行 业 门 户 


图 12-19 名 为 #logo 的 CSS 规则 图 12-20 ”应 用 样式 后 的 效果 (3) 


2. 页 面 导航 区 域 的 制作 


O 将 鼠标 定位 在 设计 视图 中 , 单 击 “ 插 入 ”面板 的 “插入 Div 标签 ”按钮 国 ,弹出 “ 插 
入 Div 标签 ”对 话 框 ,在 “插入 ”下 拉 菜 单 中 选择 “在 标签 之 后 ”选项 ,并 在 其 后 方 下 拉 菜 单 
中 选择 二 div id= "header" Ji, Æ ID 下 拉 列 表 框 中 输入 main_content, 最 后 单 击 “ 确 
定 ” 按 钮 , 即 可 在 header 容器 后 面 插入 main_content 容器 。 
同样 的 方法 ,在 main_content 容器 内 部 插入 一 个 名 为 menu_tab 的 div 容器 。 切 换 
到 div. css 文件 中 ,分 别 创建 名 为 #main_content fll # menu_tab 的 CSS 规则 ,如 图 12-21 
所 示 。 
© 在 menu_tab 容器 内 部 插入 无 序列 表 作为 导航 菜单 ,其 结构 代码 如 图 12-22 所 示 。 
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<div id="menu_tab"> 
<ul class="menu"> 
#main_content 1 <1i><a 
clear:both; <lix<a a 
} <li><a av"> 情 侣 蛋糕 </a></1i> 
#menu tab { <li><a href="#" avn> 鲜 奶 蛋糕 </a></1i> 
width:1000px; <li><a href="#" avn"> 水 果 蛋 糕 </a></1i> 
height:36px; <li><a href="#" av"> 销 售 排行 </a></1i> 
background: <li><a href="#" nav"> 祝 福 语 </a></1i> 
url(../images/menu bg.gif) repeat-x; </ul> 


</div> 


图 12-21 创建 相应 的 CSS 规则 (1) 图 12-22 导航 的 结构 代码 


切换 到 div. css 文件 中 ,分 别 创建 相关 的 CSS 规则 ,如 图 12-23 和 图 12-24 所 示 。 


a-nav:link, a.nav:visited ( 
display:block. 
float:left; 
padding:0px 8px Opx 8px; 
margin:0 14px 0 14px; 


ul.menu { i 
pese _ height:36px; 
Har style-type none; text-decoration:none; 
loat:left; text-align:center; 
display:block; color:#fff; 
width:982px; 
margin: 0px; a.nav:hover 1{ 


padding: 0px; display:block; 

} float:left; 

ul.menu li { padding:Opx 8px Opx 8px; 
display:inline; margin:0 14px 0 14px; 
font-size: 16px; height :36px; 
font-family: "WREE"; text-decoration:none; 
lfont-weight:bold; text-align:center; 
line-height: S50px; color:#199ECD; 

) 


12-23 menu 类 的 CSS 规则 12-24 HÁKY CSS 规则 


O 为 了 进一步 美化 导航 菜单 的 视觉 效果 ,这 里 在 每 个 文字 链接 中 间 增 加 了 导航 分 隔 
符 , 美 化 后 的 结构 代码 如 图 12-25 所 示 。 切 换 到 div. css 文件 中 ,创建 divider 类 的 CSS 规 
则 ,如 图 12-26 所 示 。 返 回 设 计 页 面 , 此 时 页 面 效果 如 图 12-27 所 示 。 


<div id="menu_tab"> 
<ul class="menu"> 

<li><a href="#" class="nav"> 首 页 </a></1i> 
<li class="divider"></1i> 
<li><a href="#" cl1ass="nav"> 生 日 蛋糕 </a></1i> 
<li class="divider"></1i> 
<li><a href="#" class="nav"> 情 侣 蛋糕 </a></1i> 
<li class="divider"></1i> 
<li><a href="#" class="nav"> 鲜 奶 蛋 糕 </a></1i> 
<li class="divider"></1i> 


ul.menu 1i.divider { 


<li><a href="#" class="nav"> 水 果 蛋 糕 </a></1i> 
<1i class="divider"></1i> 
<li><a href="#" class="nav"> 销 售 排行 </a></1i> 
<1i class="divider"></1i> 
<li><a href="#" class="nav"> 祝 福 语 </a></1i> 
</ul> 
</div> 


12-25 美化 后 的 导航 结构 代码 


display:inline; 

width: 4px; 

height:50px; 

float:left; 

background: url(../images/menu_divider.gif) 


no-repeat center; 


12-26 divider 类 的 CSS 规则 


KRE 销售 排行 祝福 语 


图 12-27 导航 的 最 终 效果 
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© 将 鼠标 定位 在 设计 视图 中 , 单 击 “ 插 入 ”面板 的 “插入 Div 标签 ”按钮 国 ,弹出 “ 插 
入 Div 标签 ”对 话 框 ,在 “插入 ”下 拉 菜 单 中 选择 “在 标签 之 后 ”选项 ,并 在 其 后 方 下 拉 菜 单 
中 选择 一 div id 二 "menu_tab" 放 选项 ,在 ID 下 拉 列 表 框 中 输入 crumb_navigation ,最 后 单 
击 “ 确 定 ” 按 钮 , 即 可 在 menu_tab 容器 后 面 插入 crumb_navigation 容器 ,用 于 显示 当前 
位 置 。 
删除 多 余 的 文字 ,在 crumb_navigation 容器 内 部 输入 “当前 位 置 :二 span > Ë W 
</span>”, WHR] div. css 文件 中 ,创建 相应 的 CSS 规则 ,如 图 12-28 所 示 。 返 回 设计 页 
面 ,此 时 页 面 效果 如 图 12-29 所 示 。 
#crumb_navigation { 
width:970px; 
height:15px; 
padding: 5px 10px 0 20px; 
color:#333333; 
background: url (../images/navbullet.png) 
no-repeat left; 


background-position:5px 8px; 
} 


Pere eTor:oraodd; - 
1 = 3800 R em. 
图 12-28 创建 相应 的 CSS 规则 (2) 图 12-29 应 用 样式 后 的 效果 (4) 


3. 左 侧 边栏 区 域 的 制作 


(D 在 crumb_navigation 容器 后 面 插入 一 个 名 为 left_content 的 div 容器 ,作为 页 面 
左 侧 边栏 。 切 换 到 div. css 文件 中 ,创建 名 为 井 left_content 的 CSS 规则 ,如 图 12-30 
所 示 。 

删除 left_content 容器 内 多 余 的 文字 ,并 将 鼠标 定位 在 left_content 容器 结束 标签 的 
前 面 ,在 “插入 ”面板 的 “常用 ”选项 卡 中 单 击 “ 插 入 Div 标签 "按钮 国 ,弹出 “插入 Div 标 
签 ” 对 话 框 ,在 “插入 ”下 拉 菜 单 中 选择 “在 插入 点 "选项 ,在 “类 ”下 拉 列 表 框 中 输入 title_ 
box, 最 后 单 击 “ 确 定 ” 按 钮 , 即 可 在 页 面 中 插入 应 用 title_box 类 的 div 容器 ,如 图 12-31 所 
示 。 删 除 多 余 的 文字 ,在 刚 创 建 的 div 容器 内 部 输入 “和 蛋糕 分 类 ”文字 内 容 。 


WA Div 标签 


#left_content ( 
width: 180px; 
float:left; 
padding:0 0 0 Spx; 
background: #FFF; 

} 


图 12-30 名 为 #left_content 的 CSS 规则 12-31 插入 应 用 title_box 类 的 div 容器 


© 切换 到 div. css 文件 中 ,创建 title_box 类 的 CSS 规则 ,如 图 12-32 所 示 。 返 回 设 
计 页 面 , 此 时 页 面 效果 如 图 12-33 所 示 。 
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-title box { 
width:178px; 
height:30px; 
margin:5px 0 0 0; 
background: #ffe8fl; 
color:#be3264; 
text-align:center; 
font-size:13px; 
font-weight :bold; 
line-height:30px; 
border: 1px #ffcbe0 solid; 


} 


图 12-32 名 为 . title_box 的 CSS 规则 图 12-33 应 用 样式 后 的 效果 (5) 


© 在 “一 div class 二 "title_box" 记 蛋糕 分 类 二 /div 二 ”后 面 直接 插入 一 个 无 序列 表 用 
于 放置 蛋糕 的 分 类 信息 ,具体 的 结构 代码 如 图 12-34 所 示 。 此 时 ,页 面 效 果 如 图 12-35 
所 示 。 


<div id="left_content"> 

<div class="title_box"> 蛋 糕 分 类 </div> 

<ul class="left_menu"> 
<li><a href="#"> 按 用 途 分 类 </a></1i> 
<li><a href="#"> 生 日 </a> <a href="#"> 情 侣 </a> 
<a href="#"> 祝 寿 </a> <a href="#"> 庆 典 </a> <a href="#"> 儿 童 </a></1i> 
<li><a href="#"> 技 口味 分 类 </a></1i> 
<li><a href="#"> 鲜 奶 </a> <a href="#"> 幕 斯 </a> 
<a href="#"> 香 本 </a> <a href="#"> 芝 士 </a> <a href="#"> 抹 茶 </a></1i> 
<li><a href="#"> 按 造型 分 类 </a></1i> 
<li><a href="#"> 贺 形 </a> <a> 方 形 </a> 
<a> 心 形 </a> <a> 多 层 </a> <a> 艺 术 </a></1i> 
<li><a href="#"> 按 价格 分 类 </a></1i> 
<li><a href="#">200 档 </a> <a href="#">300 档 </a> 
<a href="#">500 档 </a> <a href="#">700 档 </a></1i> 
<li><a hre: > 技 节 日 分 类 </a></1i> 
<li><a href="#"> 情 人 节 </a> <a href="#"> 七 夕 节 </a> 
<a href="#"> 母 亲 节 </a></1i> 

</ul> 

</div> 


图 12-34 插入 无 序列 表 图 12-35 未 美化 的 分 类 列表 


@ 为 了 使 列表 更 加 美观 ,需要 对 列表 进行 一 系列 规则 定义 。 这 里 为 无 序列 表 定 义 一 
个 left_menu 类 ,用 于 控制 整个 列表 的 样式 ,具体 代码 如 图 12-36 所 示 。 返 回 设计 视图 ,将 
刚才 定义 的 left_menu 类 应 用 于 二 ul 二 标签 。 此 时 ,页 面 效果 如 图 12-37 所 示 。 


ul.left menu { 
width:178px; 
padding: 0px; 
margin: 0px; 
list-style:none; 
border-left:lpx #ffcbe0 solid; 
border-right:lpx #ffcbe0 solid; 
border-bottom:lpx #ffcbe0 solid; 


} 

ul.left_menu li { 
margin: 0px; 
list-style:none; 


} 


12-36 left_menu 类 的 CSS 规则 12-37 ”应 用 规则 后 的 效果 (1) 


© 此 时 ,分 类 列表 雏形 已 经 基本 成 形 , 但 还 不 美观 。 这 里 再 定义 odd 类 和 even 类 进 
一 步 美化 列表 ,具体 的 CSS 代码 如 图 12-38 所 示 。 将 定义 的 类 应 用 在 不 同 的 列表 项 中 , 具 
体 的 结构 代码 如 图 12-39 所 示 。 返 回 设计 页 面 .此 时 页 面 效 果 如 图 12-40 所 示 。 
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display:block; 


border-bottom:lpx #e4e4e4 dashed; 


text-decoration:none; 
color: #504b4b; 
padding:0 0 0 14px; 
line-neight 


ul.left_menu li.even{ 


border-bottom:lpx #e4e4e4 dashed; 


background-color: #£fddeb; 
) 

ul.left_menu li.even a 
text-decoration:none; 
color: #504b4b; 
padding-left: 5px; 
line-height:25px; 


ul.left_menu 

ul.left_menu 
color:#000; 
text-decoration:underline; 


<div id="left_content"> 
<div class="title_Dbox">8EB3</div> 


"和 "> 庆典 </a> <a href="#"> 儿 童 </a></1i> 
> 接口 味 分 类 </a></1i> 

#"> 评 奶 </a> <a href="#"> 票 斯 </a> 

"> 香 芋 </a> <a href="4">2-</a> <a href-"#"> 抹 荣 </a></1i> 
"> 抗 造型 分 类 </a></1i> 

#"> 园 形 </a> <a> 方 形 </a> 

艺术 </a></1i> 

"> 按 价 格 分 类 </a></1i> 

#">200 档 </a> <a href="#">300 档 </a> 
href="#">700 档 </a></1i> 

"> 按 节日 分 类 </a></1i> 

> 情人 节 </a> <a href=" 打 "> 七 夕 节 </a> 


<a href-" 打 "> 母亲 节 </a></1i> 
</ul> 


} </div> 


图 12-38 odd 类 和 even 类 的 规则 图 12-39 ”分 类 列表 最 终 的 结构 代码 


© 在 刚才 创建 的 无 序列 表 后 面 插入 一 个 应 用 了 title_box 类 的 div 容器 ,并 将 多 余 的 
文字 修改 为 “今日 推荐 ”。 

D 将 鼠标 定位 在 刚 创 建 的 应 用 title_box 类 的 div 容器 后 面 ,在 “插入 ”面板 的 “常用 ” 
选项 卡 中 单 击 “ 插 入 Div 标签 ”按钮 国 ,弹出 “插入 Div 标签 ”对话 框 ,在 “插入 ”下 拉 菜 单 
中 选择 “在 插入 点 ”选项 ,在 “类 ”下 拉 列 表 框 中 输入 border_box, 最 后 单 击 “ 确 定 ” 按 钮 , 即 
可 在 页 面 中 插入 应 用 border_box 类 的 div 容器 ,其 结构 代码 如 图 12-41 所 示 。 切 换 到 


div. css 文件 中 ,创建 border_box 类 的 CSS 规则 ,如 图 12-42 所 示 。 


午 糕 分 类 
控 用 途 分 类 <div class="title_box"> 今 日 推荐 </div> 
EH Wa NE Pn JIE <div class="border_box"></div> 
按 口味 分 类 四 12-41 插入 应 用 border_box 类 的 div 容器 
W Wu EF 抹茶 
按 造 型 分 类 
图 形 方形 LE £E 艺术 
.border box { 
按 价格 分 类 width:178px; 
height:auto; 
200% 30085 50085 70085 text-align:center; 
border-left:1px #ffcbe0 solid; 
BERAR border-right:lpx #ffcbe0 solid; 
情人 节 七 少 节 母亲 节 border-bottom:lpx #ffcbe0 solid; 
图 12-40 ”应 用 样式 后 的 效果 (6) 12-42 ”名 为 . border_box 的 CSS 规则 


® 同样 的 方法 ,在 二 div class 王 "border_box" 二 标签 内 部 插入 三 个 应 用 不 同类 的 div 
容器 ,用 于 分 别 放置 产品 的 名 称 、. 产 品 图 片 以 及 产品 价位 ,其 结构 代码 如 图 12-43 所 示 。 
切换 到 div. css 文件 中 ,分 别 创建 名 为 . product_title、. product_img 和 . prod_price 的 CSS 
规则 ,如 图 12-44 所 示 o 

@ 删除 多 余 的 文字 ,在 刚刚 创建 的 3 个 div 容器 内 输入 产品 信息 和 插入 产品 图 片 ,最 
终 的 结构 代码 如 图 12-45 所 示 。 需 要 注意 的 是 ,这 里 为 了 使 产品 价格 能 够 吸引 访问 者 , 增 
加 了 reduce 类 和 price 类 ,分别 用 于 产品 原价 和 产品 现价 的 风格 显示 。 
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-product title { 
color:#ff8a00; 
padding:5px 0 5px 0; 
font-weight:bold; 


<div class="title_box"> 今 日 推荐 </div> -product_img { 
<div class="border box"> Padding: Spx 0 Spx 0; 
<div class="product title"></div> } n 
<div class="product img"></div> -prod_price ( 
<div class="prod price"></div> Padding:Spx 0 Spx 0; 
</div> 
图 12-43 结构 代码 (1) 图 2-44 相应 的 CSS 规则 (1) 


12-45 ”修改 后 的 结构 代码 


O 切换 到 div. css 文件 中 ,创建 reduce 类 和 price 类 的 CSS 规则 ,以 及 二 a 二 标签 伪 
类 的 CSS 规则 ,如 图 12-46 所 示 。 返 回 设计 页 面 , 此 时 页 面 效 果 如 图 12-47 所 示 。 


text-decoration:line-through; 今日 推荐 


en 
color: #ff8a00; 


.product_title a ( / 
text-decoration:none; 
color:#ff8a00; 
padding:5px 0 5px 0; 
font-weight:bold; 
border:none; 


.product_title a:hover { 


color:#064ESA; ¥220 ¥178 


图 12-46 ”创建 相应 的 CSS 规则 (3) 图 12-47 应 用 样式 后 的 效果 (7) 


O 将 鼠标 定位 在 图 12-45 中 结构 代码 的 最 后 面 ,在 “插入 ”面板 的 “常用 ”选项 卡 中 单 击 
“插入 Div 标签 "按钮 国 .依次 插入 应 用 title_box 类 和 border_box 类 的 两 个 div 容器 。 在 应 
用 border_box 类 的 div 容器 内 部 插入 文本 字段 ， 
具体 的 结构 代码 如 图 12-48 所 示 。 切 换 到 div. 
css 文件 中 ,创建 相应 CSS 规则 ,如 图 12-49 所 示 。 
返回 设计 页 面 ,此 时 页 面 效 果 如 图 12-50 所 示 。 图 12-48 “行业 资讯 ”的 结构 代码 


input .newsletter input ( 
width:150px; 
height:16px; 
border:lpx #ddd9d9 solid; 
margin:10px 0 Spx 0; 
font-size:12px; 
padding: 3px; 
color: #999999; 


a.join ( 
width:30px; MEAR 
display:block; 
margin:Opx 0 5px 110px; 


padding:2px 8px 6px 8px; our email 
cc ira 
图 12-49 ”相应 的 CSS 规则 (2) 图 12-50 应 用 规则 后 的 效果 (2) 
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O 将 鼠标 定位 在 图 12-48 中 结构 代码 的 最 后 面 ,插入 一 个 应 用 了 banner_adds 类 的 
div 容器 ,删除 其 中 的 文字 ,并 在 内 部 插入 名 为 “thtj2. jpg” 的 图 片 ,具体 的 结构 代码 如 
图 12-51 所 示 。 切 换 到 div. css 文件 中 ,创建 banner_adds 类 的 CSS 规则 ,如 图 12-52 所 
示 。 返 回 设计 页 面 ,此 时 页 面 效 果 如 图 12-53 所 示 。 


夏威夷 的 积 往 


EFS mY EE 
Wami 


<div class="banner_adds"> <a href="#"><img src= 
"images/thtj2.jpg" width="163" height="400" /></a></div> 


</div> 
12-51 结构 代码 (2) 
width:180px; 
text-align:center; 
padding:10px 0 10px 0; 
12-52 banner_adds 类 的 CSS 规则 图 12-53 ”应 用 规则 后 的 效果 (3) 


4. 主体 内 容 区 域 的 制作 


在 本 示例 中 ,主体 内 容 区 域 指 的 是 页 面 三 列 布局 中 间 的 部 分 。 经 过 对 主页 效果 图 的 
分 析 , 这 里 对 产品 列表 区 域 采用 多 个 div 容器 相互 嵌 套 的 方法 实现 整体 布局 ,具体 的 制作 
过 程 如 下 。 

O 将 鼠标 定位 在 设计 视图 中 , 单 击 “ 插 入 ”面板 的 “插入 Div 标签 "按钮 国 ,弹出 “ 插 
入 Div 标签 ”对 话 框 ,在 “插入 "下 拉 菜 单 中 选择 “在 标签 之 后 ”选项 ,并 在 其 后 方 下 拉 菜 单 
中 选择 二 div id 二 "left_content" 记 选项 ,在 ID 下 拉 列 表 框 中 输入 center_content, 最 后 单 
击 “ 确 定 ” 按 钮 , 即 可 在 left_content 容器 后 面 插入 center_content 容器 。 切 换 到 div. css 
文件 中 ,创建 名 为 站 center_content 的 CSS 规则 ,如 图 12-54 所 示 。 

返回 设计 视图 ,删除 多 余 的 文字 ,在 center_content 容器 内 部 插入 一 个 应 用 了 oferta 
类 的 div 容器 ,其 结构 代码 如 图 12-55 所 示 。 


#center_content ( 
width: 600px; 
background: #FFF; 


float:left; <div id="center_content"> 
padding:Spx 10px 5px 15px; <div class="oferta"></div> 
</div> 
图 12-54 名 为 并 center_content 的 CSS 规则 图 12-55 ”结构 代码 (3) 


© 切换 到 div. css 文件 中 ,创建 oferta 类 的 CSS 规则 ,如 图 12-56 所 示 。 返 回 设计 页 
面 ,此 时 页 面 效果 如 图 12-57 所 示 。 
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„oferta ( 

width:585px; 

height:156px; 

background: 
url(../images/slider_bg.gif) no-repeat 
center; 

float:left; 

padding: 0px; 

margin:0 0 Spx Opx; 
) 


图 12-56 oferta 类 的 CSS 规则 


@ 在 应 用 oferta 类 的 div 容器 后 面 插入 一 个 应 用 center_title_bar 类 的 div 容器 ,并 
将 其 中 的 文字 改 为 “最 新 款式 ”, 其 结构 代码 如 图 12-58 所 示 。 切 换 到 div. css 文件 中 ,创建 
center_title_bar 类 的 CSS 规则 ,如 图 12-59 所 示 。 返 回 设计 页 面 后 , 即 可 看 到 实际 效果 。 


-center title bar { 
width:575px; 
height :26px; 
float:left; 
padding:0 0 0 10px; 
line-height: 26px; 
font-size:12px; 


<div id="center_content"> color: #FFF; 
<div class="oferta"></div> font-weight :bold; 
<div class="center_title_bar"> 最 新 款式 </div> background: #e6307b; 
</div> 
12-58 ”当前 结构 代码 (1) 12-59 center_title_bar 类 的 CSS 规 则 


@ 接 下 来 ,主要 对 产品 显示 区 域 的 布局 实现 进行 讲解 。 为 了 更 好 地 理解 实现 过 程 ， 
这 里 先 给 出 一 个 示意 图 说 明 相互 嵌 套 的 div 容器 都 应 用 了 哪些 类 规则 ,如 图 12-60 所 示 。 


应 用 prod_box 类 、， 
应 用 product_title 类 


用 center_prod_box 类 


应 用 product_img 类 


应 用 prod_price 类 
应 用 prod_buy 类 


应 用 prod_details_tab 类 
应 用 prod_details 类 


12-60 ”产品 显示 区 域 布局 示意 图 


© 接着 步骤 @ 继 续 制作 ,在 应 用 了 center_title_bar 类 的 div 容器 后 面 , 青 插入 一 个 
应 用 prod_box 类 的 div 容器 ,用 于 放置 一 个 产品 信息 ,其 结构 如 图 12-61 所 示 。 切 换 到 
div. css 文件 中 ,创建 prod_box 类 的 CSS 规则 ,如 图 12-62 所 示 。 

@ 在 应 用 prod_box 类 的 div 容器 内 部 插入 一 个 应 用 center_prod_box 类 的 div 容 
器 ,用 于 放置 产品 的 具体 信息 ,这 样 处 理 的 好 处 是 方便 后 期 对 产品 信息 的 样式 修改 ,其 结 
构 代 码 如 图 12-63 所 示 。 切 换 到 div. css 文件 中 ,创建 center_prod_box 类 的 CSS 规则 ， 
如 图 12-64 所 示 。 
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pros boe 
<div 1de"center_content"> width: 173px; 

<div class="oferta”></diw> height: auto; 

<div class="center_tit1e barry 晤 台式 cyddvy float:left: 

<div class="prod box" >H ER class "prod_box” 的 内 容 </div> padding:10px 10px 10px 1px; 
<t 


图 12-61 当前 结构 代码 (2) 图 12-62 prod_box 类 的 CSS 规则 


-center prod box { 


<div id-"center_content"> 
<div classs"oferta"></d1v> 


tw clesse"center, titie ber MURR qi padding: 0px; 
Ñiy claasnrprod bo O i DPR 
oea assaka miaka border:lpx #ffcbe0 solid; 
c/a ) 
图 12-63 ”当前 结构 代码 (3) 12-64 center_prod_box 类 的 CSS 规则 


© 将 鼠标 定位 在 应 用 center_prod_box 类 的 div 容器 内 部 ,在 “插入 ”面板 的 “常用 ” 
选项 卡 中 单 击 “ 搬 入 Div 标签 ”按钮 国 ,弹出 “插入 Div 标签 ”对话 框 ,在 “插入 ”下 拉 菜 单 
中 选择 “在 插入 点 ”选项 ,在 “类 ”下 拉 列 表 框 中 选择 “product_title” 选 项 ,如 图 12-65 所 示 。 
同样 的 方法 ,再 插入 两 个 应 用 product_img 类 和 prod_price 类 的 div 容器 ,其 结构 代码 如 
图 12-66 所 示 。 


插入 Div 标签 


aaa adds 
ID: [border-box 


ay 
meyslettar input 
dd 

oferta <div classe"prod_box"> 

price ter_prod_box"> 


prod bor roduct_titler> 此 处 显示 class "product title" 的 内 容 </div> 
prod price 


a <div clsss-"prodact_ing” 直 外 显示 class "product ing" 的 内 容 </div 
ew <diy classe"prod_price"> 此 处 显示 class "prod price" 的 内 容 </div> 
es <t 

title_box </a> 


12-65 ”插入 div 容器 12-66 ”当前 结构 代码 (4) 


切换 到 代码 视图 ,在 刚才 创建 的 3 个 div 容器 中 插入 产品 的 相关 信息 ,如 图 12-67 
所 示 。 此 时 ,设计 视图 中 对 应 的 产品 信息 已 经 显示 出 来 ,如 图 12-68 所 示 。 


12-67 插入 产品 信息 后 的 结构 代码 


© 将 鼠标 定位 在 应 用 center_prod_box 类 的 div 容器 结束 标签 的 后 面 ,插入 一 个 应 
用 prod_details_tab 类 的 div 容器 ,删除 多 余 的 文字 ,在 其 内 部 输入 * 加 入 购物 车 ”和 “详细 
信息 ”文字 信息 ,结构 代码 如 图 12-69 所 示 。 
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为 了 使 文字 链接 更 为 美观 ,这 里 分 别 定义 了 prod buy 类 和 prod_details 类 用 于 美化 文 
字 链 接 , 具 体 的 CSS 规则 如 图 12-70 所 示 。 返 回 设计 页 面 , 此 时 页 面 效果 如 图 12-71 所 示 。 


-prod details tab { 
width:173px; 
height:31px; 
float:left; 
margin:3px 0 0 0; 


a.prod_buy 
width: 75px; 
height:24px; 
display:block; 
float:left; 
background: 

url(../images/link_bg.gif) 

no-repeat center; 
margin:2px 0 0 Spx; 
text-align:center; 
line-height:24px; 
text-decoration:none; 
color: #FFF; 


{ 


px; 
height:24px; 
图 12-68 产品 信息 页 面 效果 sp lay lo 
oat:right; 
background: 
url(../images/link_bg.gif) 
no-repeat center; 
margin:2px Spx 0 0; 
text-align:center; 
line-height:24px; 


<div class=“prod detalls _tab"”> text-decoration:none; 
<a href=" gs MAR /a5 color:#FFF; 
<a hr PPRA acd vo 
图 12-69 当前 结构 代码 (5) 12-70 CSS 规则 (1) 12-71 产品 信息 最 终 效果 


此 时 ,一 个 产品 信息 已 经 制作 完成 ,读者 只 需 在 代码 视图 中 复制 整个 产品 信息 的 代 
码 , 再 粘贴 多 次 即 可 完成 整个 产品 信息 区 域 的 布局 ,最 后 再 对 相关 链接 加 以 修改 即 可 ,最 
终 效果 如 图 12-72 所 示 。 


5. 右 侧 边栏 区 域 的 制作 


Q) 将 光标 置 于 设计 视图 中 ,在 “插入 "面板 的 “常用 ”选项 卡 中 单 击 “ 插 入 Div 标签 ” 按 
钮 国 , 弹 出 “插入 Div 标签 ”对话 框 ,在 “插入 "下 拉 菜 单 中 选择 “在 标签 之 后 ”选项 ,在 其 后 
面 的 下 拉 菜 单 中 选择 二 div id= 王 "center_content" 二 选项 ,然后 在 ID 下 拉 列 表 框 中 输入 
right_content, 最 后 单 击 “ 确 定 ?按钮 , 即 可 在 center_content 容器 后 面 插入 right_content 
容器 ,用 于 放置 页 面 右 侧 边栏 的 内 容 。 切 换 到 div. css 文件 中 ,创建 一 个 名 为 # right_ 
content 的 CSS 规则 ,如 图 12-73 所 示 。 

© 与 之 前 实现 “行业 资讯 ?区 域 的 布局 方法 相同 ,这 里 在 右 侧 边栏 内 部 实现 “蛋糕 搜索 ” 
区 域 的 布局 ,具体 的 结构 代码 如 图 12-74 所 示 。 此 时 ,页 面 视图 的 效果 如 图 12-75 所 示 。 

@ 将 鼠标 定位 在 right_content 容器 结束 标签 的 前 面 ,在 “插入 ”面板 的 “常用 ”选项 卡 
中 单 击 “ 插 入 Div 标签 ”按钮 国 ,弹出 “插入 Div 标签 "对话 框 ,在 “插入 ”下 拉 菜 单 中 选择 
“在 插入 点 ”选项 ,在 “类 ”下 拉 列 表 框 中 输入 shopping_cart, 最 后 单 击 “ 确 定 ” 按 钮 , 即 可 在 
页 面 中 插入 应 用 shopping_cart 类 的 div 容器 。 切 换 到 div. css 文件 中 ,创建 shopping_ 
cart 类 的 CSS 规则 ,如 图 12-76 所 示 。 
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#right_content { 
width:180px; 
float:left; 
padding: 0px; 
background: #FFF; 


图 12-73 CSS 规则 (2) 


<div id="right_content"> 
<div class="title box"> 蛋 糕 搜索 </div> 
<div class="border_box"> 
<form action="" method=' 


<a href="#" class="join" 搜索 </a> 


</form> 
</div> 
</div> 


12-74 蛋糕 搜索 区 域 的 结构 代码 


图 12-72 产品 信息 区 域 的 最 终 效果 图 12-75 蛋糕 搜索 


返回 设计 视图 ,删除 多 余 的 文字 ,在 应 用 shopping_cart 类 的 div 容器 内 部 ,插入 应 用 
title_box 类 的 div 容器 ,并 输入 “我 的 购物 车 ”文字 内 容 , 此 时 结构 代码 如 图 12-77 所 示 
页 面 视图 效果 如 图 12-78 所 示 。 


catv ciasse”shopping_care"> 
<div clesse"titie box"> 和 的 隐 斩 车 < div : 
c/a i 


图 12-76 shopping_cart 类 的 CSS 规则 图 12-77 当前 结构 代码 (6) ”图 12-78 当前 页 面 效果 


@ 将 鼠标 定位 在 “二 div class="title_box" 过 我 的 购物 车 二 /div 之 ”的 后 面 ,再 次 插入 
一 个 应 用 cart_details 类 的 div 容器 ,切换 到 div. css 文件 中 ,创建 cart_details 类 的 CSS 
规则 ,如 图 12-79 所 示 。 

返回 代码 视图 ,在 刚刚 创建 的 div 容器 内 部 输入 相关 文字 和 插入 图 片 , 其 结构 代码 如 
图 12-80 所 示 。 在 此 结构 代码 中 ,这 里 又 定义 了 border_cart 类 和 cart_icon 类 用 于 美化 布 
局 ,其 具体 的 CSS 代码 如 图 12-81 所 示 。 返 回 设计 页 面 , 此 时 页 面 效果 如 图 12-82 所 示 。 


<aly class="shopping_cart"> 
<div classe"title box"> RANSE. /a: 

Sai chasas "cart etaria BER 2 Tebr/> 

<span classe"border_cart"></span> 合计 : 


<img src-"images/shoppingcart.png" alt=' 
midthe"35" height=35" border-"0" /></a></div> 
<a 


text-align: left: 


图 12-79 cart_details 类 的 CSS 规则 12-80 ”当前 结构 代码 (7) 
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order top: 19% 4999999 dashed: 


re 
adding: Spx 0 0 Spx: 


图 12-81 相应 的 CSS 规则 (3) 图 12-82 应 用 规则 后 的 效果 (5) 


© 将 鼠标 定位 在 图 12-80 所 示 代 码 的 最 后 面 ,在 光标 所 在 位 置 插入 一 个 应 用 title_ 
box 类 的 div 容器 ,采用 之 前 实 eh aa nan 
局 ,具体 的 结构 代码 如 图 12-83 所 示 ,页 面 效 果 如 图 12-84 所 示 。 


<div class="title_box"> 特 价 专区 </div> 
<div class="border_box"> 
<div class="product_title">#MES<4/div> 
<div class="product_img"><a href="#"><img src="images/nl_s.jpg" 
width="94" height="122" /></a></div> 
<div class="prod_price"><span class="reduce">&yen;160</span> 
<span class="price">&yen;100</span></div> 


12-83 ”当前 结构 代码 (8) 图 12-84 “特价 专区 ”布局 效果 


© 将 鼠标 定位 在 图 12-83 所 示 代 码 的 最 后 面 ,在 光标 所 在 位 置 插入 一 个 应 用 title_ 
box 类 的 div 容器 ,采用 之 前 实现 “蛋糕 分 类 ”区 域 布局 的 方法 ， * BS NN 区 域 的 布 
局 ,具体 的 结构 代码 如 图 12-85 所 示 ,页 面 效果 如 图 12-86 所 示 。 


<div class="title_box"> 常 见 问题 </div> 
<ul class="left_menu"> i 
: á | 3 可 以 雪 糙 到 后 付款 吗 ? 


4 的 重 杰 与 轩 片 和 3 : 
(EST i 5 对 货品 不 满意 能 退换 吗 ? 
<li class="even"><a href="#">6. 夜间 下 单 如 从 处理?</a></1i> l 6. 入 间 下 单 如 何 处 理 ? 
</ul> De A 3 
图 12-85 ”当前 结构 代码 (9) 图 12-86 “常见 问题 "布局 效果 


@ 根据 整个 布局 的 需要 ,将 光标 定位 在 图 12-85 所 示 结 构 代 码 的 后 面 ,在 “插入 ” 面 
板 的 “常用 ?选项 卡 中 单 击 “ 插 入 Div 标签 ”按钮 国 ,弹出 “插入 Div 标签 ”对 话 框 ,在 “ 插 
和 人 ”下拉 菜单 中 选择 “在 插入 点 "选项 ,在 “类 ”下 拉 列 表 框 中 选择 “banner_adds” 选 项 ,最 后 
单 击 “ 确 定 ” 按 钮 , 即 可 在 页 面 中 插入 应 用 banner_adds 类 的 div 容器 。 接 着 ,在 该 div 容 
器 中 搬入 名 为 “bannerl. jpg” 的 图 片 , 即 可 看 到 最 终 效果 。 
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#footer { 


6. 页 面 底部 区 域 的 制作 a 
height:45px; 
background: 


在 右 侧 边栏 后 面 插入 名 为 footer 的 div 容器 , 输 ur1(../images/footer_bg.gif) 


repeat-x top; 


入 页 面 底部 版 权 信 息 等 内 容 。 切 换 到 div. css 文件 中 ， ee 
创建 名 为 # footer 的 CSS 规则 ,如 图 12-87 所 示 。 返 


回 设计 页 面 ,此 时 页 面 效果 如 图 12-88 所 示 。 12-87 名 为 #footer 的 CSS 规则 
至 此 ,“ 宇 泽 蛋 糕 网 ”主页 的 布局 已 经 基本 实现 , 读 
者 可 以 根据 自己 的 喜好 修改 相关 的 CSS 规则 ,进一步 美化 整个 页 面 。 


Copyright 2012 - 20162 wuyuze cn AI Rights Reserved ICP& 10011234% 
iz: 7x24 小 时 均 可 网 上 订 置 从， 女皇 先 送 轨 粒 后 付款 ， Raat PLHIR6. RFP. KE Papal 5: 1700 Saam: ARAE. 


图 12-88 页 面 底部 区 域 的 布局 效果 


12.2.2 搜索 页 面 的 布局 实现 


搜索 页 面 指 的 是 访问 者 通过 网 站 搜索 引擎 搜索 出 来 的 产品 所 在 的 显示 页 面 。 此 页 面 
与 主页 布局 有 极 大 的 相似 之 处 ,这 里 不 再 袭 述 其 实现 过 程 ,而 是 着 重 讲解 如 何 使 用 Css 
规则 实现 翻 页 效果 ,如 图 12-89 所 示 。 

O 在 页 面 中 搬入 一 个 应 用 pagination 类 的 div 容器 ,用 于 对 整个 翻 页 区 域 加 以 控制 。 
切换 到 div. css 文件 中 ,创建 pagination 类 的 CSS 规则 ,如 图 12-90 所 示 。 


float:left; 
padding: 2px 0 2px 10px; 


ISAMAA. Da 8][ 下 一 页 ane pegar 91px; 
12-89 使 用 CSS 实现 的 翻 页 效果 12-90 pagination 类 的 CSS 规则 


© 在 刚 创 建 的 div 容器 内 部 插入 无 序列 表 ,其 结构 代码 如 图 12-91 所 示 。 
© 为 了 使 列表 横向 排列 ,需要 对 无 序列 表 进 行 一 系列 定义 ,具体 的 样式 代码 如 
图 12-92 所 示 。 此 时 ,页 面 效 果 如 图 12-93 所 示 。 


图 12-91 当前 结构 代码 (10) 12-92 ”创建 相应 的 CSS 规则 (4) 


@ 进一步 美化 翻 页 按钮 。 切 换 到 div. css 文件 中 ,创建 无 序列 表 中 二 a 二 标签 的 伪 
类 ,具体 样式 代码 如 图 12-94 所 示 。 此 时 ,页 面 效 果 如 图 12-95 所 示 。 
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color: #929292 


12-95 ”应 用 规则 后 的 效果 (7) 12-96 disablepage 类 的 CSS 规则 


© 如 果 当 前 所 在 页 面 的 页 数 为 1” 时, 则 前 面 不 再 有 任何 链接 页 面 ,此 时 需要 为 当前 
的 页 面 效 果 定 义 CSS 规则 ,这 里 定义 一 个 disablepage 类 来 解决 这 个 问题 ,样式 代码 如 


图 12-96 所 示 。 返 回 代码 视图 ,将 刚 创建 的 disablepage 类 应 用 在 无 序列 表 中 “上 一 页 ”所 
在 的 二 li 二 标签 中 。 此 时 ,页 面 效 果 如 图 12-97 所 示 。 


padding: 0 Spx 

border: 1px s0114 navy; 
ss background-color: #2e6abl; 
= TN 2][3][4]..[5][6][7][L8][ 下 一 页 color: #FFF: 


图 12-97 应 用 规则 后 的 效果 (8) 图 12-98 currentpage 类 的 CSS 规则 
© 由 于 当前 所 在 页 面 的 数字 要 区 别 于 其 他 数字 ,这 里 需要 单独 进行 定义 。 切 换 到 
div. css 文件 中 ,创建 currentpage 类 的 CSS 规则 ,具体 样式 代码 如 图 12-98 所 示 。 返 回 代 


码 视图 ,将 刚 创 建 的 currentpage 类 应 用 在 当前 页 面 数字 所 在 的 二 li 二 标签 中 。 此 时 ,页 
面 效果 如 图 12-99 所 示 。 


E 5] 6] 7] e] -A 


FN /we/li> 


图 12-99 ”应 用 规则 后 的 效果 (9) 图 12-100 ” 翻 页 效果 的 最 终结 构 代 码 


至 此 ,使 用 CSS 规则 实现 翻 页 效果 的 制作 过 程 已 经 完成 ,为 使 读者 更 为 方便 地 理解 
以 上 多 个 类 的 应 用 情况 ,这 里 给 出 翻 页 效果 的 最 终结 构 代 码 , 如 图 12-100 所 示 。 


12.2.3 产品 详细 信息 页 面 的 布局 实现 


当 访 问 者 选中 某 个 产品 时 ,网 站 将 自动 跳 转 到 该 产品 的 详细 信息 页 面 。 在 此 页 面 中 ， 
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主要 对 产品 的 各 种 信息 加 以 描述 ,使 得 浏览 者 加 深 了 解 要 购买 的 产品 。 此 外 ,还 增加 “ 相 
似 产 品 ” 和 “您 也 许 还 会 喜欢 ”两 个 产品 推荐 列表 ,为 访问 者 提供 产品 参考 。 由 于 此 页 面 与 
首页 的 布局 有 一 定 相似 之 处 ,这 里 仅 对 页 面 中 不 同 的 地 方 加 以 讲解 。 


1. 左 侧 边栏 的 制作 


(D 将 鼠标 定位 在 名 为 left_content 的 div 容器 内 部 ,然后 在 “插入 ”面板 的 “常用 ” 选 
项 卡 中 单 击 “ 插 入 Div 标签 ”按钮 国 ,弹出 “插入 Div 标签 ?对 话 框 ,在 “插入 ”下 拉 菜 单 中 
选择 “在 插入 点 "选项 ,在 “类 ”下 拉 列 表 框 中 选择 “title_box” 选 项 ,如 图 12-101 所 示 , 单 击 
“确定 ”按钮 , 即 可 插入 应 用 title_box 类 的 div 容器 。 删 除 多 余 的 文字 ,输入 “您 也 许 还 会 
喜欢 "文字 内 容 , 作 为 产品 推荐 列表 的 题目 。 

© 同样 的 方法 ,在 应 用 title_box 类 的 div 容器 后 面 , 插 入 应 用 border_box 类 的 div 

@ 在 应 用 border_box 类 的 div 容器 的 内 部 ,参照 首页 左 侧 边栏 的 制作 方法 实现 布 
局 ,最 终 效果 如 图 12-102 所 示 。 


[border box 
ID: [border cart 
cart_details 
cart icon 
center_prod_box 
center title bar 
curr entpage 
disablepage 
divider 


even 
flow _list_title_bar 
join 

Left menu 

menu 


nav 
newsletter_input 
odd 


oferta 
pagination 


prod details 
prod details_tab 
prod price 
product_img 
Product title 


Æ 12-101 插入 应 用 title_box 类 的 div 容器 图 12-102 产品 详细 信息 页 左 侧 
边栏 效果 
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2. 产品 详细 介绍 区 域 的 制作 


D 将 鼠标 定位 在 名 为 “center_content” 的 div 容器 内 部 ,然后 在 “插入 ”面板 的 “常用 ” 
选项 卡 中 单 击 “ 插 入 Div 标签 ?按钮 国 ,弹出 “插入 Div 标签 ”对 话 框 ,在 “插入 ”下 拉 菜 单 
中 选择 “在 插入 点 ”选项 ,在 “类 ”下 拉 列 表 框 中 输入 “prod_box_big”, 单 击 “ 确 定 ” 按 钮 , 即 
可 插入 应 用 prod_box_big 类 的 div 容器 。 切 换 到 div. css 文件 中 ,创建 prod_box_big 类 
的 CSS 规则 ,如 图 12-103 所 示 。 

@ 删除 多 余 的 文字 ,在 刚 创建 的 div 容器 内 部 ,插入 应 用 center_prod_box_big 类 的 div 
容器 。 切 换 到 div. css 文件 中 ,创建 center_prod_box_big 类 的 CSS 规则 ,如 图 12-104 所 示 。 


cenrer_prod_ box_big ( 
idth: 554px; 
s 


f. ; 
text-align: center: 
padding:0 0 10px O; 
float:left; margin: 0px; 

padding: LOpx 10px 15px 15px; border:1px #FOFAFS solid: 


图 12-103 prod_box_big 类 的 CSS 规则 12-104 center_prod_box_big 类 的 CSS 规则 


© 同样 的 方法 ,在 应 用 center_prod_box_big 类 的 div 容器 内 部 ,插入 应 用 product _ 
img_big 类 的 div 容器 ,用 于 放置 放大 的 产品 图 片 。 删 除 div 容器 中 多 余 的 文字 ,插入 一 
张 放大 的 产品 图 片 。 最 后 ,切换 到 div. css 文件 中 ,创建 product_img_big 类 的 CSS 规则 ， 
如 图 12-105 所 示 。 为 了 更 清楚 地 理解 以 上 几 步 中 div 容器 之 间 的 关系 ,这 里 给 出 当前 的 
结构 代码 ,如 图 12-106 所 示 。 


<div id="center_content"> 
<div class="prod box_big"> 
<div class="center prod box big"> 
<div class="product img big"><img src= 
"images/hl big.jpg" width="280" height="260" /></div> 
Fil 


oduct 
width: 


sasana ps; n esa 
</div> 
12-105 product_img_big 类 的 CSS 规则 12-106 ”当前 结构 代码 (11) 


返回 设计 视图 , 即 可 看 到 应 用 规则 后 的 效果 ,如 图 12-107 所 示 。 

@ 将 鼠标 定位 在 应 用 product_img_big 类 div 容器 的 后 面 ,插入 一 个 应 用 details_big_ 
box 类 的 div 容器 ,用 于 放置 产品 基本 信息 。 切 换 到 div. css 文件 中 ,创建 details_big_box 
类 的 CSS 规则 ,如 图 12-108 所 示 。 


12-107 应 用 规则 后 的 效果 (10) 12-108 details_big_box 类 的 CSS 规则 
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© 在 应 用 details_big_box 类 div 容器 内 部 ,分 别 插入 应 用 product_title_big 类 、 
specifications 类 和 prod_price_big 类 的 3 个 div 容器 ,用 于 放置 产品 名 称 、. 详 细 信息 和 当 
前 售 价 三 方面 的 内 容 , 其 结构 代码 如 图 12-109 所 示 。 


<div classordecatla big boxry 
hy lasan produet titie hip iF class "product sitie bir MIE /atv 
<div class="specifications"i class "specifications" 的 内 容 </di 
oa price p10 此 处 星 示 class "prod price Pig" @BISc/div> 
<t 


12-109 当前 结构 代码 (12) 


© 切换 到 div. css 文件 中 ,分 别 创建 product_title_big Æ , specifications 类 和 prod_ 
price_big 类 的 CSS 规则 ,如 图 12-110 所 示 。 

返回 到 设计 视图 ,在 应 用 product_title_big 类 的 div 容器 内 部 ,删除 多 余 的 文字 ,并 输 
入 相关 文字 内 容 。 在 应 用 specifications 类 的 div 容器 内 部 ,删除 多 余 的 文字 ,输入 产品 的 
基本 信息 ,如 图 12-111 所 示 。 


product _titie big 1 I 
color: 8tta00; 
padding: Spx 0 Spx 0; BES. 707057 | 
font-veight:bo1d; | 


别 : ZARE 
font-size: 14px; Esas, 由 宇 泽 蛋 粒 网 在 当地 的 连锁 店 就 


„specit t 


tont-size:12px: HEUMEI: DEEDEE, Math 
erheaghr:20px 海 注 观 层 直 糕 ， 上 下 两 层 的 尺寸 相差 最 少 

lead pedee hg ;4 英寸 , 如 :8 十 至 少 委 12 寸 , MAREO | 

pasing: Spr 0 Spe 0; [天 小 。 价 格 按 上 述 价格 各 层 的 价格 之 和 进行 

Leno-aleer lps ;计算 ,标价 按照 上 层 的 尺寸 | 

E POE emsa E REMUE... | 

@] 12-110 ”相应 的 CSS 规则 (4) 12-111 输入 产品 基本 信息 


@ 为 了 使 产品 基本 信息 的 内 容 更 加 醒目 .这 里 又 定义 了 blue 类 ,使 得 部 分 文字 凸显 
蓝 色 。 切 换 到 div. css 文件 中 ,创建 blue 类 的 CSS 规则 ,如 图 12-112 所 示 。 

返回 代码 视图 ,将 需要 凸显 的 文字 内 容 增加 二 span 二 标签 ,并 应 用 blue 类 ,此 时 的 结 
构 代码 如 图 12-113 所 示 。 


<div class="details big box"> 
<div class="product title_big"> 倾 城 之 恋 </div> 
<div class="specifications"> 
<p> 商 品 编号 : <span class-"blue">707057</span><br /> 
类 别 : <span Casa Akai pa a /> 
配送 服务 : <span clas: be :|</span><br /> 
蛋糕 材料 :<span class="blue". 酒 花 装饰 Sy apanr <hr /> 
备注 :<span Class="p1ue">(REEEE Ep -J</span><br 
附送 :<span class="blue"> 赐 费 附送 精美 贸 卡 ， 代 写 您 的 祝福 。 Saas /> 


</p> 
blue ( </div> 
color: 0ls9pcc; <div class="prod price_big"></div> 
</div> 
图 12-112 blue 类 的 CSS 规则 12-113 ”当前 结构 代码 (13) 


@ 在 应 用 prod_price_big 类 的 div 容器 内 部 ,删除 多 余 的 文字 ,输入 当前 产品 的 市 价 
和 售 价 , 并 将 具体 的 价格 应 用 之 前 定义 的 reduce 类 和 price 类 ,当前 的 结构 代码 如 图 12-114 
所 示 , 设 计 视 图 中 的 效果 如 图 12-115 所 示 。 
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| 
iss =+ | 
MOAR: 由 宁 泽 宣 镁 同 在 当地 的 连 钠 由 | 
ia ， 保 证 本 条 时 和 质量 。 | 
:看 村 材料 : DESDEN Miate | 
(RENERE, ETEENRTAER | 
寸 。 如 -8 寸 至 少 释 12 寸 ,而 不 前 EROT | 
| 

| 

| 

| 

1 

| 

| 

| 

1 


s 价格 按 上 述 价格 各 层 的 价格 之 和 进行 | 
HE 标价 报 照 上 层 的 尺 
PBeeemnisi sa 


<div class="prod price big"> 


<p> 市 价 : <span class="reduce">&yen;374</span></p> ipt: ¥374 
<p> 售 价 : <span class="price">&yen;315</span></p> iSi: ¥315 
</div> iaaa a EE A ot RE RR 
12-114 ”当前 结构 代码 (14) 12-115 ”产品 价格 的 最 终 效果 


© 切换 到 代码 视图 ,在 图 12-114 所 示 的 结构 代码 后 面 输入 “加 入 购物 车 “产品 比 
较 "文字 内 容 。 选 择 “ 加 入 购物 车 ”文字 , 按 下 组 合 键 Ctrl 十 T, 为 当前 文字 增加 环绕 标 
签 二 a> ,并 将 之 前 定义 的 prod_buy 类 应 用 到 该 链接 上 。 

同样 的 方法 ,为 “产品 比较 ”文字 内 容 增加 环绕 标签 二 a。 由 于 之 前 没有 定义 可 以 应 
用 的 CSS 类 规则 ,这 里 切换 到 div. css 文件 中 ,创建 prod_compare 类 的 CSS 规则 ,如 
图 12-116 所 示 。 再 次 返回 代码 视图 ,将 刚才 定义 的 类 规则 应 用 到 “产品 比较 ”文字 内 容 
上 。 此 时 ,结构 代码 如 图 12-117 所 示 ,页 面 效 果 如 图 12-118 所 示 。 


MOERS: isis qhe ESAE 
MINDE, ERNEA. 
EHA: EEE iaeth 


proa _conpac: 
pre ENERE, t FEF HRERS 

spe baths tE HERRIOT | 

float:left: 按 上 述 价格 各 屋 的 价格 之 和 进行 | 


background 
url(../images/link_bg.gif) no-repeat 
center: 

nargin: 2px 0 O Spx; <div class="prod_price big"> 
pp 市 价 ; <span classs"reduce">&yen:274c/span></p> 

z <p> 售 价 ; <span cless="price">&yen:215c/span></p> 

text-decoration: none; <t 

color: 0l594ec; <a hret="9” class-"prod_buy"> 加 入 购物 车 </ 
1) <a hret="#" class-"prod compare"; > 产品， yas<jdiwy 


R4 


j | 
| 
l 
1 


图 12-116 prod_compare 类 图 12-117 当前 结构 代码 (15) 图 12-118 应 用 样式 后 的 效果 (8) 
的 CSS 规则 


D 在 应 用 center_prod_box_big 类 的 div 容器 后 面 ,插入 应 用 jieshao 类 的 div 容器 。 
切换 到 div. css 文件 中 ,创建 jieshao 类 的 CSS 规则 ,如 图 12-119 所 示 。 

D 在 应 用 jieshao 类 的 div 容器 内 部 ,删除 多 余 的 文字 ,并 输入 “详细 介绍 ”文字 内 容 ， 
然后 插入 应 用 congtent_jieshao 类 的 div 容器 。 切 换 到 div. css 文件 中 ,创建 congtent_ 
jieshao 类 的 CSS 规则 ,如 图 12-120 所 示 。 

O 切换 到 代码 视图 ,在 应 用 congtent_jieshao 类 的 div 容器 内 部 ,输入 更 为 详细 的 产 
品 介绍 ,并 插入 图 片 。 此 时 ,当前 结构 代码 如 图 12-121 所 示 ,页 面 效 果 如 图 12-122 所 示 。 
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ee 


text-align: font-size: 1 
color: #F60; nepal tai 


font-weight:bo1d; color: 8000; 
wargin:Opx; font-weight:noraal; 
border-bottom:lpx #FOF4F5 solid; padding: LOpx; 


图 12-119 jieshao 类 的 CSS 规则 12-120 congtent_jieshao 类 的 CSS 规则 


<div class="jieshao"> 详 细 介绍 
<div class="congtent jieshao"> 
<p H: NEER, es 
= #: PAERMEN E b X. 
TAR) asas uB Tm. RATE 


£H, PaM, 婚庆 ,生子 ,节日 </p> 
3-1234, 400-321-4323, </p> 
> [iÑ 明 您 至少 应 提前 3 小 时 下 订单 我 们 保证 按时 送 达 ; 为 了 能 够 有 充 
分 的 时 间 准 备 , SEO RU 
<p><img src="images/70705711.jpg" width="530" height="300" /></p> 


</div> 
</div> 


12-121 当前 结构 代码 (16) 


i t): Wamuinmisi=. D. X. m. mie—g 
mia: RIUNITA, etinoyam ; ama T Sa , aT WE BUET, 
ed 

Í 886561: pa +B Wa 65 ez sB 

] BTWBP481: 400-123-1234, 400-321-4321 i 
i M: gS28Rüsberrie , RNMESMSS: Twanna RRRS | 
RIIT. 


ee amama: 


12-122 ”应 用 样式 后 的 效果 (9) 


B 在 应 用 prod_box_big 类 的 div 容器 后 面 ,插入 应 用 center_title_bar 类 的 div 容 
器 ,仿照 之 前 的 制作 方法 ,将 三 个 产品 横向 布局 放置 ,最终 效果 如 图 12-123 所 示 。 


12-123 “相似 产品 "区域 布局 效果 
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至 此 ,产品 详细 介绍 区 域 有 别 于 首页 部 分 的 制作 过 程 已 经 介绍 完了 ,读者 可 以 根据 自 
己 的 喜好 修改 相关 的 CSS 规则 ,进一步 美化 整个 页 面 。 本 案例 对 整个 网 站 的 布局 思路 仅 
供 读者 参考 ,在 实际 工作 中 CSS 样式 布局 其 实 是 很 随意 的 ,只 要 将 整体 布局 思路 择 顺 , 掌 
握 如 何 处 理 页 面 效果 即 可 ,至 于 CSS 样式 的 具体 内 容 就 变 得 不 再 重要 了 。 


123 实 jil 


1. 实 训 要 求 


参考 本 章 实现 电子 商务 类 网 站 的 整个 过 程 ,以 2 一 3 人 的 小 组 为 单位 ,以 “和 蛋糕 订购 
网 ?为 题材 ,设计 并 实现 蛋糕 在 线 订 购 的 三 级 页 面 。 


2. 过 程 指导 


O 讨论 并 确定 “蛋糕 订购 网 ”主页 、 产 品 列表 页 和 产品 详细 信息 页 的 布局 规划 。 
© 在 规划 的 基础 上 ,使 用 “DIV 十 CSS” 的 制作 方式 逐步 细 化 页 面 布局 。 
© 制作 过 程 中 , 边 制 作 边 保 存 边 预览 ,最 终 效果 可 参照 图 12-124 一 图 12-126 所 示 。 


a Bs ` =>. NA ; We 


mom BREAN Curoney OBP- EUR [EY 


8 Featured products 


A Promotions — (y Categories 


Am. We ma Ak au MM aa a and Sa 


图 12-124 网 站 主页 面 
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3:42 39: eg, 2 eb 22 Susa 


3 speca gins 


¥ Promotions — (Q Categories 


e. 
am. u . aa kau mes aa ma m 


Æ 12-125 产品 列表 页 


88 Product name My eat sasa wm amas 


@ About Our Shop 


ç` 


aa a aa amd ma 


Æ 12-126 产品 详细 页 
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124 =J 题 


1. 在 电子 商务 中 B2B 和 B2C 两 种 营销 关系 分 别 指 的 是 什么 ? 
2. 策划 一 个 电子 商务 网 站 ,并 撰写 网 站 策划 报告 ,要求 使 用 DIV 十 CSS?” 的 方式 制作 
出 网 站 的 子 页 面 ,如 图 12-127 一 图 12-129 所 示 。 


N A 
$, petshop t Af 


ù "asan 由 更 ds 


Languages EB ENIE “cumenor GBP EUR [加 


art 3xlems1TOTAL 1005 mencat 


€ p3 Lorem onum oer at anet consectetu seoacrg es 
eB DAIEN 

Lorem ipsum dolor sk amet 

= =s og 42) 


© accesones 


Oasaeme 


图 12-127 习题 2 对 应 图 (1) 
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$$» petshop wy 
Wh mn 


tama >» category name Lapas EIN Comence cap EUR usD 


R Category books art 3wñemsiYOTAL Wes sewcad 


A About Our Sho 


K PN D — ga 


labore et ore magna aigua, Ut 
onm ad minim veniam, auis 


Ma valke. ik I tidh 


z] 12-128 习题 z 对 应 图 (2) 


$.: petshop Wy 
MTE E SE 


hama vpnoguaname Lapes REIN Curen cap euR uso 


@ Product nai car awama tOtAL wos araad 


€e? 


@ About Our Sho 


ms s 
== ega 
sS a 


wa aa mem veniam, Qw 
ra 


P Promotions 


Lomm paum taor st amet ctnseaear 390 on ost pesons 
e weas 

Laren paun aonr at anat. cozaesas aasecng st. mee se massa wees Partnars 

wasata wan et donre sapa wan Vt =a u sen vasan sa sena 

s SW accesones 
ees om 
e secas 

人 csome 


12-129 习题 2 对 应 图 (3) 
283 


ARBE 新闻 类 网 站 的 设计 与 实现 


口 了 解 大 型 新 闻 类 网 站 建设 的 基本 思路 。 

口 熟 练 掌握 图 文 混 排 的 基本 方法 。 

口 掌握 新 闻 正 文 板块 实现 的 方法 。 

新 闻 类 网 站 指 的 是 那些 主要 以 提供 新 闻 ,资讯 等 信息 服务 为 主 的 网 站 ,常见 的 新 闻 网 
有 新 浪 新 闻 、 腾 讯 新 闻 、 新 华 网 、 人 民 网 和 搜狐 新 闻 等 。 本 章 结合 之 前 所 学 的 知识 ,向 读者 
介绍 新 闻 类 网 站 的 实现 方法 。 


131 规划 与 分 析 


新 闻 网 是 以 经 营 新 闻 业 务 为 主要 生存 手段 的 网 站 ,通常 被 认为 是 继 报纸 .广播 .电视 
之 后 的 第 四 媒体 。 从 整体 来 看 ,新 闻 网 大 致 可 以 划分 为 国家 大 型 新 闻 门 户 网 站 (如 新 华 
网 .人民 网 等 )、 商 业 门 户 网 站 (如 新 浪 新 闻 、 网 易 新 闻 等 )、 地 方 新 闻 门 户 网 站 (如 大 了 殉 网 、 
芜湖 新 闻 网 等 ), 以 及 各 种 行业 新 闻 门 户 网 站 (如 湖北 美食 网 、 中 国 化 工 网 等 )。 


13.1.1 相关 知识 


1. 新 闻 类 网 站 的 现状 与 未 来 


新 闻 类 网 站 随 着 互联 网 十 多 年 的 发 展 ,一 些 国家 级 新 闻 单位 的 网 站 发 展 迅 速 ,如 入 民 
网 、 央 视 网 等 网 站 不 但 很 快 地 完成 了 其 母体 布局 新 媒体 的 使 命 ,还 很 好 地 完成 了 市 场 化 操 
fE; 但 还 有 一 些 新 闻 网 站 , 虽 经 过 了 多 种 探索 ,依然 处 于 学 步 初期 。 

在 这 样 的 背景 下 ,国家 级 新 闻 网 站 实际 上 已 经 分 化 为 两 个 阵营 ,一边 是 人 民 网 、 央 视 
网 这 样 的 位 于 第 一 梯队 的 新 闻 网 站 ; 另 一 边 则 是 有 着 很 好 母体 背景 但 经 过 十 多 年 发 展 仍 
远 远 滞 后 的 第 二 梯队 的 新 闻 网 站 ,如 光明 网 .中 广 网 等 。 

新 闻 类 网 站 未 来 的 发 展 面临 着 两 大 历史 机 遇 , 一 个 是 移动 互联 , 另 一 个 是 社交 网 络 。 
从 某 种 意义 上 说 “移动 互联 十 社交 网 络 ? 是 未 来 新 闻 网 站 的 发 展 契 机 。 当 带宽 、 手 机 资 
费 、 上 网 习惯 等 先前 的 “束缚 ”都 被 一 一 解 开 后 ,很 多 媒体 将 借助 这 个 全 新 的 “移动 互联 " 实 
现 翻盘 。 对 于 新 闻 网 站 而 言 ,不 管 是 处 于 第 一 梯队 还 是 第 二 梯队 , 抓 住 这 一 机 遇 , 迅 速 转 
型 为 移动 互联 的 “内 容 提 供 商 "和 “服务 提供 商 ” 是 明智 的 选择 。 
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2. 新 闻 类 网 站 的 市 场 分 析 


这 里 选取 三 个 具有 代表 性 的 新 闻 类 网 站 品牌 (新 浪 新 闻 、 腾 讯 新 闻 和 新 华 网 ) 对 当前 
市 场 进行 简要 分 析 。 

新 浪 新 闻 及 时 全 面 地 报道 涵盖 了 国内 外 突 发 新 闻 、 体 坛 赛事 、 娱 乐 时 尚 、 财 经 及 YT 
产业 资讯 等 内 容 ; 腾讯 新 闻 依托 巨大 的 QQ 使 用 群体 ,利用 腾讯 众多 的 软件 和 服务 提高 
腾讯 网 流量 ; 新 华 网 是 新 华 社 主办 的 中 国 最 大 、 最 具有 全 球 影响 力 的 国家 重点 网 站 ,能 够 
独家 报道 世界 各 地 热点 消息 ,第 一 时 间 追 踪 突 发 事件 ,深度 分 析 评 论 焦 点 话题 ,是 名 副 其 
实 的 “网 上 新 闻 信息 总 汇 ”。 

三 家 网 站 各 具 优 势 ,新 浪 依靠 的 是 自身 十 多 年 的 网 络 营 销 经 验 , 借 助 新 浪 微 博 、 手 机 
浏览 工具 等 软件 服务 ,使 大 众 对 “新 浪 ” 品 牌 在 潜意识 里 扎根 ; 腾讯 主要 依托 众多 的 网 络 
服务 ,例如 登录 QQ 时 , 便 会 自动 弹出 信息 框 ,里 面包 含 新 闻 ,游戏 .音乐 和 视频 等 各 方面 
鲜 活 的 图 像 , 很 容易 吸引 大 众 去 访问 网 站 ; 新 华 网 则 主要 依赖 的 是 专业 性 、 深 入 性 和 独创 
性 赢得 大 众 的 喜爱 。 总 的 来 说 ,无 论 何 种 新 闻 网 站 都 应 该 致力 于 提供 海量 信息 ,快捷 、 有 
效 地 满足 用 户 个 性 化 需求 ,提前 做 好 详细 的 市 场 分 析 , 为 网 站 运营 打 好 基础 。 


13.1.2 规划 设计 


从 浏览 者 访问 新 闻 类 网 站 的 整个 过 程 来 讲 ,网 站 的 页 面 种 类 大 致 包括 主页 .新闻 网 列 
表 页 和 新 闻 网 详细 内 容 页 3 种 。 浏 览 者 通常 是 在 主页 上 看 到 感 兴趣 的 新 闻 标 题 , 单 击 链 
接 后 即 可 看 到 详细 内 容 ,而 新 闻 网 列表 页 面 通 常 是 不 被 看 到 的 ,对 于 那些 内 容 庞大 的 新 闻 
类 网 站 ,还 可 能 跳 转 到 二 级 栏目 的 主页 ,但 无 论 过 程 怎 样 ,基本 的 页 面 布 局 为 3 种 。 本 节 
以 搭建 “ 宇 泽 互联 国际 新 闻 网 ?3 种 静态 页 面 为 目标 ,向 读者 讲述 新 闻 类 网 站 的 制作 方法 。 


1. 新 闻 网 主页 面 


新 闻 类 网 站 的 主页 所 包含 的 信息 量 非常 大 ,通常 采用 多 列 、 多 板块 布局 进行 实现 , 考 
虑 到 访问 者 的 便利 性 ,一 般 上 还 包含 站 内 搜索 ,内容 导 航 等 功能 。 根 据 实际 需求 ,通过 成 
熟 的 构思 与 设计 ,新闻 网 主页 面 最 终 效果 如 图 13-1 所 示 ,布局 示意 图 如 图 13-2 所 示 。 


2. 新 闻 网 列表 页 


新 闻 网 列表 页 的 主要 作用 是 罗列 新 闻 条 目 ,访问 者 一 般 不 能 直接 访问 该 类 页 面 ,只 有 
在 检索 时 才能 看 到 。 限 于 该 类 页 面 所 承担 的 功能 ,页 面 通常 以 列表 元 素 作 为 主要 框架 ,无 
须 过 多 的 美化 修饰 。 通 过 成 熟 的 构思 与 设计 ,新 闻 网 列表 页 最 终 效果 如 图 13-3 所 示 , 布 
局 示意 图 如 图 13-4 所 示 。 


3. 新 闻 网 详细 内 容 页 


当 访 问 者 单 击 某 个 感 兴趣 的 新 闻 标 题 链 接 时 , 即 可 打开 详细 内 容 页 。 该 页 面 主要 显 
示 新 闻 的 详细 信息 ,以 及 摘要 发表 时 间 和 发 布 人 等 信息 。 根 据 实 际 需求 ,详细 内 容 页 效 
果 如 图 13-5 所 示 ,布局 示意 图 如 图 13-6 所 示 。 
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图 13-1 主页 预览 效果 


第 133 新 闻 类 网 站 的 设计 与 实现 


container 
header 
hd_header 
logo rd_header 
box_menuS02 gb 
ad 
leftArea rightArea 
box_fsbox xwxc_box 
til jrDian gb xwxc_box 
conts_jrDian_gb XWXC_box 
ad 
leftArea rightArea 
boxS02 xwxc_box 
boxS02 XWXC_box 
= | 
boxS02 XWXC_box 
footer 
图 13-2 主页 布局 示意 图 
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图 13-3 新 闻 网 列表 页 预览 效果 
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container 
header 
hd_header 
logo rd_header 
box_menuS02 gb 
ad 
sb_listGb01 


contsLd_ listGb01 


footer 


13-4 列表 页 布局 示意 
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图 13-5 新 闻 网 详细 内 容 页 预览 效果 
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container 
header 
hd_header 
logo rd_header 


box_menuS02 gb 


ad 


box_sylj_ tw 
leftArea rightArea 
xwxc_box 
box_tuK_tw xwxc_box 
XWXC_box 


footer 


13-6 新闻 网 详细 内 容 页 布局 示意 图 


132 设计 与 实现 


新 闻 网 信息 量 大 ,布局 也 十 分 复杂 ,在 动手 制作 之 前 如 果 没 有 周密 的 规划 ,很 容易 造 
成 结构 混乱 、 过 度 谤 套 和 修改 不 便 等 诸多 麻烦 ,为 了 有 效 避 免 这 些 麻烦 ,这 里 向 读者 提供 
一 些 工 作 经 验 。 

。 尽 量 多 使 用 类 规则 。 在 为 某 个 div 容器 编写 CSS 规则 时 尽量 使 用 类 规则 ,其 原因 

在 于 类 规则 可 以 应 用 在 多 个 容器 上 面 , 能 够 有 效 提高 效率 。 

。 CSS 规则 编写 时 , 先 编写 全 局 或 整体 方面 的 规则 ,再 针对 某 些 容器 编写 具体 规则 。 
这 样 处 理 的 好 处 在 于 ,整体 方面 的 规则 可 以 应 用 在 多 个 布局 相同 的 容器 上 面 ,一 
是 提高 效率 ; 二 是 网 站 整体 风格 控制 能 够 统一 。 

。 层 次 结构 一 定 要 有 语义 。 每 个 容器 存在 的 价值 一 定 要 有 明确 的 语意 ,应 该 避免 过 
度 嵌 套 , 使 内 容 丧 失语 意 。 

° 及 时 清除 浮动 。 当 某 个 板块 内 的 容器 被 赋予 浮动 属性 后 ,应 该 及 时 地 对 浮动 进行 

清除 ,避免 后 面 的 容器 布局 错位 。 

以 上 几 点 经 验 是 在 工作 中 总 结 得 出 的 ,读者 在 练习 过 程 中 也 应 该 不 断 地 总 结 ,将 自己 
所 遇 到 的 难题 汇总 并 加 以 记录 ,久而久之 工作 效率 自然 提高 。 


289 


13.2.1 新 闻 网 主页 的 实现 


由 于 新 闻 网 内 容 过 于 庞大 ,这 里 主要 对 制作 的 大 致 过 程 加 以 叙述 ,对 某 些 重要 板块 的 
实现 加 以 详细 讲解 ,读者 在 模仿 练习 时 请 参考 源 文 件 。 


1. 创建 站 点 


O 启动 Dreamweaver CS5 创建 站 点 ,并 在 站 点 内 分 别 创建 用 于 放置 图 像 的 images 
文件 夹 和 放置 CSS 文件 的 style 文件 夹 。 

© 分 别 创 建 空白 XHTML 文档 和 CSS 文档 ,将 网 页 文档 保存 在 根 目录 下 ,并重 命名 
为 index. html, 将 CSS 文档 保存 在 style 文件 夹 下 ,并重 命名 为 common. css, 

© 将 创建 完成 的 网 页 文档 和 CSS 文档 链接 起 来 。 


2. 主页 头 部 区 域 的 制作 


O 待 准备 工作 结束 后 ,切换 到 index. html 文档 中 ,在 “搬入 ?面板 的 “常用 ”选项 卡 中 
单 击 “搬入 DIV 标签 ?按钮 ,弹出 “插入 DIV 标签 ?对 话 框 , 在 “搬入 "下拉 菜单 中 选择 “在 
搬入 点 ?选项 ,在 “类 ?下拉 列表 框 中 输入 container, 最 后 单 击 “ 确 定 ” 按 钮 , 即 可 在 页 面 中 
插入 container 容器 。 


© 切换 到 common. css 文档 ,为 整个 页 面 进行 初始 化 定义 。 由 于 整个 新 闻 网 包含 许 
多 类 型 的 元 素 , 所 以 初始 化 规则 相对 比较 复杂 ,如 图 13-7 和 图 13-8 所 示 。 


body 1 
font-size: 12px; 
text-decoration: none; 
line-height:22px; 
font-family: "SimSun", "arial", 
sans-serif; 
color: #979696 
background: 
url (../images/body_s03.jpg) repeat-x; 
) 
a:link ( 
text-decoration:none; 
padding: 0; /*outline:none;*/ 
color:#204b78; 


border-collapse: collapse 


visited | 
color: #204b78; 


ca text-decoration: none; 
hl, h2, hi h5, h6 { ) 
font-size:100%; a:hover ( 
font-weight:normal; color: #c80226; 


clear (clear:both; a:active ( 
fl (float:left;) color: #204b78; 
-fr (float:right ) 


13-7 初始 化 规则 (1) 图 13-8 初始 化 规则 (2) 


© 切换 回 index. html 文档 中 ,删除 container 容器 内 多 余 文 字 , 并 将 鼠标 定位 在 该 容 
器 内 部 ,在 “插入 ”面板 的 “常用 ”选项 卡 中 单 击 “ 插 入 Div 标签 "按钮 ,按照 如 图 13-9 所 示 
的 参数 设置 在 container 容器 内 部 插入 header 容器 。 

@ 切换 到 common. css 文档 ,为 刚 创 建 的 容器 编写 CSS 规则 ,如 图 13-10 所 示 。 
290 


第 13 章 新 闻 类 网 站 的 设计 与 实现 


插入 Div 标签 


width: 978px; 
margin: 0 auto; 


header 
width: 978px; 

height: 114px; 

background: 
url (. ./images/banner_s03. jpg) 
no-repeat center 4px; 
) 


图 13-9 插入 header 容器 Æ 13-10 ”对 应 CSS 规则 


O 对 于 本 案例 来 说 ,顶部 区 域内 包含 两 部 分 内 容 ,一 是 网 站 Logo; 二 是 搜索 栏 ,如 何 
让 这 两 部 分 内 容 融 洽 地 出 现在 同一 行 ,并 且 位 于 左右 两 端 是 问题 的 重点 。 这 里 拟 采用 浮 
动 属性 解决 这 个 问题 ,为 网 站 logo 增加 左 浮动 属性 ,为 搜索 栏 增加 右 浮动 属性 ,示意 图 如 
图 13-11 所 示 。 


EETIH 
ja 


logo 向 左 浮动 搜索 栏 向 右 浮动 
13-11 示意 图 


当 某 个 容器 拥有 浮动 属性 的 时 候 , 其 本 身 就 脱离 了 文档 流 ,为 了 避免 给 其 他 容器 造成 
布局 方面 的 混乱 ,这 里 还 需 为 父 一 级 容器 增加 清除 浮动 的 属性 。 

© 在 header 容器 内 部 插入 hd_header 容器 ,并 在 其 内 部 使 用 hl 标签 作为 容器 盛 放 
logo 图 像 ,具体 的 页 面 结构 如 图 13-12 所 示 。 


清除 浮动 
° 一 logo 容 器 向 左 浮动 


搜索 栏 


</div> 
</div> 
</div> 
</div> 


13-12 ”页面 结构 


3. 二 级 导航 菜单 的 制作 


二 级 导航 的 实现 途径 有 多 种 ,有 些 借 助 JavaScript 实现 ,有 些 借助 CSS 去 实现 ,无 论 
采用 何 种 方式 导航 菜单 通常 使 用 无 序列 表 作为 容器 进行 制作 ,这 里 向 读者 介绍 使 用 CSS 
控制 二 级 菜单 的 方法 。 

O 在 hd_header 容器 的 后 面 插入 应 用 box _menuS02_gb 类 的 div 容器 ,并 在 其 中 搬 
入 多 级 嵌 套 的 无 序列 表 ,. 如 图 13-13 所 示 。 

© 导航 菜单 的 结构 创建 完成 后 ,切换 到 common. css 文档 中 为 导航 编写 相关 规则 ， 
编写 思路 如 下 : 为 菜单 增加 整体 背景 效果 ; 清除 列表 项 默认 外 观 ; 一 级 和 二 级 菜单 内 容 
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<div class="hd header clear"> 


</div> 
<div class="box_menus02_gb"> 


<ul> 
<li><a href="#"> 首 页 </a> 


一 级 菜单 内 容 
<ul> 
<li><a href="#"> 焦 点 </a></1i> 
<li><a href="#"> 链 接 </a></1i> ) 二 级 子 菜单 内 容 
<li><a href=" 旨 "> 热门 </a></1i> 
</ul> 
</1i> 
一 级 菜单 内 容 <li><a href="#"> 国 内 </a> 
<ul> 
<li><a 着"> 焦 点 </a></1i> 
<li><a 新"> 北 京 </a></1i> 
<li><a #r> Eg</a></1i> 二 级 子 菜单 内 容 
<li><a 帮 "> 重 庆 </a></1i> 
<li><a #">839</a></1i> 
</ul> 
</1i> 
一 级 菜单 内 容 <li><a href="#"> 国 际 </a> 
<ul> 
<li><a “span e fE E 3 
<li><a href="#"> 义 点 </a></1i> = y z 
<li><a href="#"> 趣 闻 </a></1i> 二 级 子 菜 单 内 容 
<li><a href="#"> 科 技 </a></1i> 一 
</ul> 
</1i> 
一 级 菜单 内 容 <li><a href="#"> 社 会 </a> 
<ul> 
<li><a href pt i "N 
#" > 法制 </a></1i> — gp Z 3 AIA 
#"> 民 生 </a></1i> P 二 级 子 菜单 内 容 


<li><a href="#"> RfF</a></li> 


</ul> 
</li> 
</ul> 
</div> 
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均 横 向 浮动 ; 一 级 菜单 被 选中 时 ,菜单 颜色 要 有 变化 ; 二 级 菜单 中 超 链 接 a 元 素 的 宽度 要 
大 于 1i 元 素 的 宽度 ,目的 是 横向 移动 鼠标 时 子 菜单 内 容 能 够 相互 链接 ; 当 一 级 菜单 被 选 
中 时 ,二 级 菜单 进行 绝对 定位 ,并 且 必 须 移动 到 一 级 菜单 的 下 方 ; 为 了 避免 一 级 菜单 和 二 
级 菜单 同时 显示 ,需要 隐藏 二 级 菜单 的 内 容 。 

O 在 对 二 级 导航 菜单 进行 细致 分 析 后 ,可 以 在 common. css 文档 中 编写 对 应 的 规 


则 ,如 图 13-14 和 图 13-15 所 示 。 


hoight: SIpx; 
margin-top: 10px; 
background: 

url(. 


./images/bg_menu_s02. png) 


1px solid #didida; 
position: relative: 


nus02_gb ul ( 


list-style-type: 


)/* 清 除 列表 项 外 观 */ 


none; 


display: block; 
text-align: center; 
text-decoration:none; 
width: 72px; 

height: 26px; 

color: #FFF; 
font-weight 
line- TER 
font-size: 


ARR RRR, 其 要 大 于 1 的 克朗 </ 
二 级 导航 菜单 系列 规则 (1) 


图 13-14 
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二 级 导航 菜单 的 结构 


_gb ul li:hover a ( 
692E2F ; 
一 级 菜单 的 景色 */ 
ul li:hover ul ( 
ck 
position:absolute; 
left;0; 
top:25px; 
width: 805px: 
)/* 当 一 级 菜单 被 选中 时 ， 二 级 菜单 进行 绝 
对 定位 ， 使 其 移动 到 一 级 菜单 的 下 方 */ 


display: block 
color: #666; 


eeun 二 级 菜单 内 容 进 


RRNA ARM 


13-15 二 级 导航 菜单 系列 规则 (2) 


第 13 章 新 闻 类 网 站 的 设计 与 实现 


D 保存 当前 文档 ,通过 浏览 器 预览 后 的 效果 如 图 13-16 所 示 。 


首页 。” 国 内 ”国际 会 
s å @ Bh Am nt. SSi 
Eae /1/7 ERSTE SEAE o) EEFDE A /vars/ivder Mals 


图 13-16 二 级 导航 菜单 预览 效果 


4. 图 片 新 闻 板 块 的 制作 


主页 上 醒目 位 置 通 常会 有 滚动 播放 的 图 片 新 闻 , 这 种 滚动 效果 主要 采用 JavaScript 
或 Flash 技术 去 实现 ,这 里 主要 介绍 图 片 新 闻 区 域 布局 的 实现 方法 。 

图 片 新 闻 板 块 通常 包含 头条 新 闻 的 标题 .滚动 图 片 . 图 片 解说 文字 ,以 及 超 链 接 等 ,为 
使 读者 清晰 地 创建 页 面 结构 ,这 里 给 出 该 板块 的 示意 图 ,如 图 13-17 所 示 。 


_ 应 用 向 右 浮 动 


效果 的 div 容 器 
使 用 p 元 素 作为 
flash 图 像 容器 实现 的 超 链 接 
切换 效果 | 


图 13-17 分 析 示 意图 


O 根据 新 闻 网 整体 的 规划 ,在 header 容器 后 面 插入 应 用 leftArea 类 规则 的 div 容 
器 ,用 于 盛 放 主 页 中 左 侧 主体 区 域 的 所 有 内 容 。 

© Æ left Area 容器 内 部 ,插入 应 用 box_fsbox 类 规则 的 div 容器 ,用 于 放置 图 片 新 闻 
板块 内 的 所 有 元 素 。 

© 在 box_fsbox 内 部 ,根据 之 前 的 分 析 使 用 合适 的 标签 元 素 创建 该 区 域 的 结构 ,如 
图 13-18 所 示 。 


<div class="box_fsbox"> 
<h3 clas; _index"><a href="#",[EBHHIRTEEE o a ></h3> 
<div class="flashA01"> 
<div id="KinSlideshow" ></div> 
</div> 
<div class="list_flash fr"> 
<P class=ms_flash> 2012F AM...) </P> 
<div class="toplink01"> 


AENA IRR a> </p> 


5 某 : 
4 Tt ee 
</div> 
</div> 
</div> 
</div> 


13-18 图 片 新 闻 区 域 的 页 面 结构 
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@ 切换 到 common. css 文档 中 编写 对 应 的 规则 ,如 图 13-19 和 图 13-20 所 示 ,保存 当 


前 文档 ,通过 浏览 器 预览 即 可 看 到 效果 。 


leftArea ( 
float:left; 
width: 624px; 

.box_fsbox 
height:282px; 
border-bottom: lpx solid #d9d9d9; 
color:#4c4c4c; 


bt_index ( 


“margin: 12px 0 12px 0; 
font-size: 25px; 
font-weight :700; 


) 
#KinSlideshow 
float:left; 
overflow: hidden; 
width:384px; 
height:220px; 
border:1px #F00 solid; 


13-19 图 片 新 闻 区 域 系 列 规则 (1) 


5. 焦点 新 闻 板 块 的 制作 


焦点 新 闻 板 块 通常 采用 图 文 环绕 的 布局 方式 ， 
如 图 13-21 所 示 。 此 类 布局 主要 通过 为 图 像 增 加 浮 
动 属性 ,再 配合 无 序列 表 或 自 定义 列表 进行 实现 。 

对 于 本 例 来 说 ,板块 标题 拟 采用 加 载 图 像 背景 
的 方式 进行 处 理 ,其 好 处 是 美化 的 标题 能 够 吸引 更 
多 浏览 者 ; 焦点 新 闻 整 体 区 域 需要 使 用 div 容器 进 
行 包 里 ,其 目的 是 方便 控制 焦点 区 域 的 所 有 内 容 ; 
焦点 新 闻 板块 内 容 进一步 划分 为 两 大 部 分 ,由 于 这 
两 部 分 布局 相同 ,可 以 定义 相同 的 CSS 规则 ; 焦点 
新 闻 中 的 图 像 需 要 为 其 增加 浮动 属性 ,对 应 的 解释 
性 文字 使 用 自 定义 列表 进行 规范 ; 焦点 新 闻 中 下 


13-20 


-list_flash 
width:226px; 
height:220px; 
line-height: 18px; 


toplink01 
margin-top: 15px; 
height: 130px; 
overflow: hidden; 

' 

toplink0l p ( 
display:block; 
height:22px; 
line-height: 22px; 
overflow:hidden; 
background: 

url(../images/btn_kk02.gif) no-repeat 

scroll 0 llpx transparent; 
text-indent: 3px; 

' 


图 片 新 闻 区 域 系 列 规则 (2) 


3 热 评 排行 


2012 陆 家 嘴 论 坛 


”。 [详细 ] 

铁 跨 改革 拉 开 大 右上 聚焦 收入 分 配制 度 改革 

邮 储 银行 行 长 陶 礼 明 被 调查 | 延长 退休 年 龄 的 真相 

央行 年 内 第 二 次 降息 | 基金 变法 | 艺术 品 查 税 风波 
地 方 机 场 扩张 进行 时 | 可 口 可乐 双 重 标准 遭 质疑 


更 多 * 


13-21 图 文 环绕 的 布局 方式 


方 的 相关 新 闻 链 接 ,同样 采用 自 定义 列表 进行 实现 。 为 了 方便 读者 理解 对 焦点 新 闻 板块 


的 分 析 , 这 里 给 出 对 应 的 示意 图 ,如 图 13-22 所 示 。 


til_jrDian_gb 容 器 ，__| 
用 于 盛 放 图 像 标题 , 
以 吸引 访问 者 


Bamm.. a 


蛟龙 号 7000 米 级 海 试 
深 讼 7062 米 


这 里 是 文字 这 时 是 文字 
这 里 是 文字 这 里 是 文字 
这 时 是 文字 这 时 是 文字 

自 定义 列表 dt 元 — pr 马 中 杀手 " 

素 ， 用 于 盛 放 标题 

Dn re *mersanuakp 减少 "马路 杀手 " 


294 


13-22 焦点 新 闻 板 块 示意 图 


hd_jrDian_gb 容 器 ， 
ATURE. J 
赋予 左 浮动 属性 


蛟龙 号 7000 米 级 海 试 : 
深度 7062 米 - 自 定义 列表 dt 元 
ET 素 ， 用 于 盛 放 标题 


字 这 里 是 文字 : 
这 a a 
ar DS” 自 定义 列表 dd 元 素 ， 


H 
i | 用 于 盛 放 相 关 链 接 


第 13 章 新 闻 类 网 站 的 设计 与 实现 


O 在 box_fsbox 容器 后 面 .插入 应 用 til_jrDian_gb 类 的 div 容器 ,切换 到 common. 
css 文档 中 编写 对 应 的 规则 ,如 图 13-23 所 示 。 通 过 浏览 器 预览 可 以 看 到 效果 ,如 图 13-24 
所 示 。 


ows Internet Explorer 


BLESE M í X Pus _ 


- P RISR e MSR p) - 
A-D Oæ- En- 安全 6) IA0 - @- 


til_jrDian_gb ( 
padding-left: 10px; 
height:39px; 
background: url (../images/h2_jdxw. png) 
no-repeat 0% 100$; 
) 


图 13-23 编写 til_jrDian_gb 类 规则 13-24 ”预览 效果 


@ Æ til jrDian_gb 容器 后 面 依次 创建 吝 套 关系 的 conts_jrDian_gb 容器 和 box_jdian_gb 
容器 ,前 者 用 于 规范 焦点 新 闻 整 体外 观 ,后 者 用 于 规范 焦点 新 闻 主 体内 容 的 外 观 。 

© 根据 之 前 的 分 析 , 在 box_jdian_gb 容器 内 部 创建 相关 容器 ,具体 结构 代码 如 图 13-25 
所 示 。 


"images/001, jpg” wi. 
<dl class: 
<dt class="til_blues01"><a href="#">Ñ3F97000;...]</a></dt> 

<dd> 


<p><a h > 这 里 是 文字 这 里 是 文字 </ a></ p> 
<p><a h > 这 里 是 文字 这 里 是 文字 </ a></ p> 
< > 这 里 是 文字 这 里 是 文字 </ a></p> 


<dl class="bd_jrDian gb clear". 


<at><a hrefz"#"> 
<da EENE.. .]</da> 

</dl> 

Šal clasa=vbd j 


an gb clear"> 
>| </a></dt> 


</div> 


13-25 ”焦点 新 闻 板 块 的 结构 代码 


@ 切换 到 common. css 文档 中 编写 对 应 的 规则 ,如 图 13-26 和 图 13-27 所 示 , 保 存 当 
前 文档 ,通过 浏览 器 预览 即 可 看 到 效果 。 


hd_jrpian_gb .til_bluesol ( 
margin-bottom: Opx; 
height: 40px; 
width: 150px; 


.conts_jrDian_gb ( font-size: 14px. 
padding: 14px; font-weight: 700; 
border-right: lpx solid #ededed; } 
border-bottom: 1px solid #ededed; ,clearfix:after 

Content m". 
height:260px;) display: block; 
inbox clear: both; 

height: 0; 


oom: 1; ) 
margin-bottom: Spx; 


; dt 
margin-right: 10px: margin: Spx 0 4px; 
height:20px; 


ian_gb dt (height:36px font-weight:normal; 
height:50px; ) 
dd p (line-height:1.2em; .bd jrDpian gb dd (height: 50px;) 
图 13-26 焦点 新 闻 板 块 系列 规则 (1) 13-27 焦点 新 闻 板 块 系列 规则 (2) 
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J 页 设计 与 制作 案例 教程 (HTML + CSS + Dreamweaver) 


6. 视频 连 线 板块 的 制作 


本 例 中 的 视频 连 线 板块 位 于 主页 的 右 侧 位 置 ,与 之 相 类 似 的 布局 在 整个 网 站 中 出 现 
过 多 次 ,所 以 在 实现 该 布局 的 过 程 中 应 该 从 整体 考虑 , 先 编写 整体 外 观 的 类 规则 , 青 编写 
具体 的 类 规则 应 用 在 不 同 的 div 容器 上 ,示意 图 如 图 13-28 所 示 。 


S EPEN EPPEN EN EEEE 一 一 J 一 Xwxc_box 容 器 ， HFE 
| 放 该 板块 的 所 有 元 素 ， 
Eras s MaE | 。 EKIS 
gl u ux. 55. 
化 的 标题 | 应 容 


xinwen 容 器 ， 用 一 一 | 一 应 用 splx_bg 类 规则 的 无 
于 规范 新 闻 列表 i S 两 了 院士 :.80 后 90 后 远 训 二 地 中国 如 无 人 种 地 -| a MT U 


序列 表 ， 用 于 显示 具体 
的 整体 外 观 的 新 闻 列 表 


13-28 “视频 连 线 ”板块 分 析 示 意图 


(Q) 在 leftArea 容器 后 面 创建 rightArea 容器 。 
© 在 rightArea 容器 内 部 创建 相互 嵌 套 的 div 容器 ,如 图 13-29 所 示 。 


© 切换 到 “common. css” 文 档 中 编写 对 应 的 规则 ,如 图 13-30 所 示 ,保存 当前 文档 , 通 
过 浏览 器 预览 即 可 看 到 效果 。 


xc_box ( 
margin-top: 15px; 
border: lpx solid #ededed; 


til_splx ( 
height:38px; 
background: #ededed 
url (../images/h2_splx. gif) 
<div class="xwxc_box"> no-repeat left center; 


-splx_bg 1 


<ul class="sp. a padding:6px 0 0 14px; 
<li><a href: 两 ， 80 后 90 后 远离 土地 中 国 巩 无 人 种 地 </a></1i> 
<li><a href + 80 后 90 后 远离 土地 HAAA </a></1i> splx_bg a 
gisa š usa 80 后 90 后 远离 土地 BEBEK A TEM </a></1i> display: block; 
<li>< "> 士 ，80 后 90 后 远 高 土地 PARETAN </a></1i> background: 
<li><a irete "#"> 两 院 院士 ，80 后 90 后 远离 土地 PREAH </a></1i> url(../images/a_left.png) 
</ul> no-repeat left Center; 
</div> padding-left:20px 
</div> 
13-29 视频 连 线 板块 的 结构 代码 图 13-30 ”CSS 规则 (1) 


需要 特别 注意 的 是 ,“. splx_bg? 规 则 应 用 于 ul 元 素 上 ,使 得 无 序列 表 项 向 右 移 动 
14px 的 距离 ,而 “. splx_bg a" 规 则 作用 在 列表 项 内 的 超 链接 上 ,并且 加 载 了 一 幅 背 景 图 
像 ,使 得 无 序列 表 前 面 出 现 了 一 幅 列 表 项 图 像 ,起 到 了 美化 效果 。 


7. 娱乐 板块 的 制作 


本 例 中 娱乐 板块 位 于 主页 的 左下 方 , 用 于 显示 与 该 类 别 相关 的 新 闻 信 息 , 如 图 13-31 
所 示 。 根 据 最 初 的 站 点 规划 ,与 此 板块 布局 相同 的 板块 还 有 多 个 ,所 以 在 实现 该 板块 的 过 
程 中 ,同样 需要 按照 从 大 到 小 的 顺序 编写 CSS 规则 。 此 外 ,为 了 方便 编写 的 CSS 规则 能 
够 应 用 多 处 ,建议 创建 为 CSS 类 规则 。 为 了 清楚 地 说 明 该 板块 的 层次 结构 ,这 里 给 出 示 
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第 133 新 闻 类 网 站 的 设计 与 实现 


意图 ,如 图 13-32 所 示 。 
mi... UU U J J = 


D. -导游 额外 收 管 费 游客 不 满 团 管 量 少 
-SPME SSES 
-SBPESHR6EES 游客 不 少 团 管 重 少 
-SIMER 游客 不 满 团 管 量 少 
“导游 额 和 lx 管 费 游客 不 满 团 管 重 少 
此 处 是 图 午 所 对 应 的 .导游 天 hx 餐 费 游客 不 满 团 管 量 少 
解释 性 文字 “导游 额外 收 管 费 游客 不 满 团 答 量 少 


13-31 娱乐 板块 的 页 面 效 果 


boxS02 


til_boxS02 til_yl 
h2 more a 


inbox 
dl rbox_boxS02 


dd 
alsit_boxS02 olsit_boxS02 


dt 


13-32 ”娱乐 板块 布局 示意 图 


@ 插入 应 用 boxS02 类 的 div 容器 ,在 其 内 部 根据 布局 示意 图 创建 相互 嵌 套 的 多 个 
容器 ,具体 页 面 结构 如 图 13-33 所 示 。 


160" height="120" /></a></4d> 


Snpneu a PERMES A></1i> 
anat 


13-33 ”娱乐 板块 的 页 面 结构 


@ 切换 到 common. css 文档 中 编写 对 应 的 规则 ,由 于 所 涉及 的 规则 过 多 请 读者 参考 
源 文件 制作 。 


13.2.2 新 闻 网 列表 页 的 实现 


新 闻 类 网 站 的 列表 页 一 般 不 能 直接 访问 ,大 多 数 情况 下 仅 是 以 罗列 某 类 新 闻 标 题 而 
存在 的 ,由 于 和 主页 有 一 定 的 相似 度 , 这 里 仅 介绍 与 主页 不 同 区 域 的 布局 。 
297 


网 页 设计 与 制作 案例 教程 (HTML+TCSs+Dreamweaver) 


1. 创建 新 的 CSS 文档 


对 于 大 型 网 站 来 说 ,一 般 会 有 多 个 CSS 文档 同时 作用 于 网 站 ,这 样 处 理 的 原因 有 两 
方面 的 内 容 ,一 是 为 了 网 站 的 安全 考虑 ,一 旦 CSS 文档 被 误 操作 删除 ,不 至 于 整个 网 站 外 
观 全 部 瘫痪 ; 二 是 为 了 方便 管理 ,多 个 CSS 文档 分 别 代表 着 多 个 方面 的 规则 (如 全 局 规 
则 、 子 页 面 规 则 、 颜 色 规则 和 字体 规则 等 ) ,便于 设计 师 后 期 维护 。 本 例 中 需要 为 二 级 页 面 
和 三 级 页 面 创建 独立 的 CSS 文 档 ,具体 操作 如 下 : 

O 创建 空白 XHTML 文档 ,并 保存 为 “sublist. html”。 ps x 

© 创建 CSS 文档 ,将 其 保存 在 style 文件 夹 下 ,并 重 命 | B common css 
名 为 “sub_list. css”, i Bi 

O 将 创建 完成 的 网 页 文档 与 CSS 文档 链接 起 来 ,如 图 13-34 链接 多 个 CSS 文档 
图 13-34 所 示 。 


2. 左 侧 导航 的 实现 


对 于 本 例 来 讲 , 左 侧 导 航 仅 是 由 多 组 无 序列 表 组 成 而 已 ,为 了 方便 地 对 整个 左 侧 导航 
控制 ,需要 为 导航 整体 创建 div 容器 ,然后 再 进一步 细 化 。 

O 在 页 面 中 插入 应 用 sb_listGb01 类 的 div 容器 ,作为 左 侧 导航 的 整体 容器 。 

@ 在 容器 内 部 创建 多 组 无 序列 表 , 列 表 的 标题 使 用 h2 元 素 进 行 标记 ,具体 结构 代码 
如 图 13-35 所 示 。 

@ 结构 创建 完成 后 ,切换 到 sub_list. css 文档 中 编写 对 应 的 规则 ,如 图 13-36 所 示 。 
切换 回 sublist. html 文档 中 ,此 时 页 面 效 果 如 图 13-37 所 示 。 


<div class="sb_listGb01 fl"> 
<div class="inbox"> 
<h2> 新 闻 </h2> 


.sb_listGbO1 
width: 100px; 


re "> 财 # 
MOSS ca hr. etan #"> 体 育 < e </li> 
</u .sb_listGb01 .inbox 
/2> padding: 0 12px; 


sb_listGb01 h2 ( 
height:38px; 
font-size; 18px; 
line-height: 38px; 
border-bottom: lpx solid #c6C6C6; 


ref="#"> 校 
<li><a hr e=" #">58E9</a></1i> 
</ul> 
<h2> 直 播 </h2> 
<ul> 
<li><a href="#"> 直 播 间 </a></1i> 


> 访谈 录 </a></1i> 
<li><a href="#"> 人 物 动态 </a></1i> 
<li><a href="#"> 博 客 直 播 </a></1i> 
</ul> 
</div> 
</div> 


Æ 13-35 左 侧 导航 的 结构 代码 
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color:#333; 
font-weight:700; 


sb_listeb01 a { 


display: block; 
height:30px: 
font-size: 14px; 
line-height: 30px: 


border-bottom: 1px solid #ESESES; 


text-align:center; 


Æ 13-36 CSS 规则 (2) 


图 13-37 页 面 效果 
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3. 新 闻 列 表 的 实现 


新 闻 列 表 主 要 借助 无 序列 表 进 行 实现 ,在 制作 过 程 中 为 了 达到 某 种 效果 通常 使 用 
Span 元 素 .storng 元 素 和 em 元 素 进行 组 合 搭 配 。 

(D 在 sb_listGb01 容器 的 后 面 插 和 人 应 用 contsLd_listGb01 类 规则 的 div 容器 ,并 设 
置 为 向 左 浮动 。 

© 在 新 创建 的 容器 内 部 创建 相互 嵌 套 的 容器 ,具体 结构 如 图 13-38 所 示 。 


用 于 控制 新 闻 列 表 的 6 fi> 一 一 一 一 一 一 一 用 于 控制 内 容 的 外 包 庄 
SME 


s="inbox"> 


<div class="al listGb01"> 
<a href="#"> 首 页 </a>5f8250;<a href="#"> 国 内 </a> 
&#8250;<a "#"> 焦 点 </a></div> 
于 显示 类 别 的 j: <ul class="zw_listGb01"> 
用 于 显示 类 别 的 外 包 衰 >2013 年 全 国 各 地 高 考 枯 元 汇总 </a> 
<a href="#">Enbsp; Snbsp; 状 元 </a> 


Enbsp ;fnbsp ;教育 部 </ a> 
应 月 在 ul 元 素 的 类 规则 ， <anh #->enbspi enbept2013 TF a> 
于 增加 背景 图 像 和 边框 pa 单独 为 日 期 增加 span 元 素 ， 


用 </1i 
等 美化 效果 Ña hrer-"#">2013 征 全国 各 地 高 者 枯 元 总 </a> ”方便 对 该 区 域 进行 控制 
sobeop ibp RA a 


<a href: 
<a href: 5nbsp; Snbsp ;教育 部 </a> 


<a href="#">&nbsp;&šnbsp;20134F</a> 


<span>2013-03-22 19:24:19</span> 
</li> 
</ul> 
</div> 
</div> 


13-38 新 闻 列表 的 结构 代码 


© 切换 到 sub_list. css 文档 中 编写 对 应 的 规则 ,如 图 13-39 和 图 13-40 所 示 。 保 存 当 
前 文档 ,通过 浏览 器 预览 即 可 看 到 效果 。 


contsLd_listGb0l ( 

width: 850px; .zw_listGb01 
overflow:hidden; margin-top: 5px; 
border-left:lpx solid #C6012A; padding-top: 8px; 
border-right: lpx solid #cccccc; border-top: lpx solid #ESESES; 
min-height:720px;/* IE7NEF */ ) 
height:100%; /* IE6NIE7VPF */ zw_listGb01 li I 

) position: relative; 

contsLd_listGb01 .inbe height: 30px; 
padding:0 14px; line-height:30px; 

) text-indsent: 8px; 

al_listGb01 ( width: 800px; 
margin-bottom: 5px; font-size: 14px; 
height:38px; background: 
font-size: 18px; url (. ./images/btn_kk02.gif) 
line-height :38px; no-repeat 0 50$; 
font-weight:700; text-indent: 10px; 
border-bottom: 1px solid #C6C6C6; ) 
color: #333333; zw_listGb01 span ( 
width: 850px; position: absolute; 

) right:0 

al_listGbOl a ( top:0; 
color:#333333; font-size: 12px; 

) ) 

13-39 新 闻 列表 的 系列 规则 (1) 13-40 新闻 列表 的 系列 规则 (2) 


13.2.3 新 闻 网 详细 内 容 页 的 实现 


新 闻 网 详细 内 容 页 属于 网 站 的 三 级 页 面 ,页 面 的 重点 在 于 新 闻 的 正文 部 分 如 何 进行 
布局 。 通 过 观察 类 似 的 新 闻 网 可 以 发 现 ,新 闻 的 正文 一 般 可 以 分 为 标题 ,摘要 和 正文 三 大 
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部 分 ,而 正文 又 可 以 再 划分 为 图 像 和 文字 ,所 以 这 里 采用 通用 的 处 理 方法 向 读者 介绍 新 闻 
网 详细 内 容 页 的 实现 过 程 。 


1. 准备 工作 


O 创建 空白 XHTML 文档 ,保存 为 page3. html, 


@ 将 已 经 创建 的 common. css 和 sub_list 文档 链接 到 page3. html 页 面 。 由 于 新 闻 
网 详细 内 容 页 头 部 的 布局 与 主页 布局 相同 ,这 里 可 以 直接 从 主页 复制 相关 结构 代码 粘贴 
在 page3. html 页 面 中 ,以 提高 制作 效率 。 


2. 新 闻 正 文 板块 的 实现 


根据 之 前 的 分 析 , 新 闻 的 正文 由 三 部 分 组 成 ,为 了 便于 理解 各 个 div 容器 的 作用 ,这 
里 给 出 该 板块 的 示意 图 ,如 图 13-41 所 示 。 


box_tuK_tw 容 器 用 于 盛 放 一 一 
该 板块 的 所 有 元 素 ， 这 里 
起 到 美化 边框 的 作用 


阿根廷 贸易 保 护 措施 之 多 居 : inbox 容 器 是 新 闻 正文 板块 
te WARGA HER EE 


于 设计 师 控制 内 部 元 素 


hd_tuK_tw 容 器 用 于 盛 放 新 
闻 摘要 区 域 的 元 素 


content 容 器 用 于 盛 放 新 闻 一 一 
的 正文 


使 用 p 元 素 盛 放 图 像 和 文字 


图 13-41 新 闻 正 文 板块 示意 图 


O 根据 页 面 的 整体 布局 规划 ,在 页 面 中 创建 leftArea 容器 ,并 在 其 内 部 插入 多 个 相 
EREK div 容器 ,具体 结构 如 图 13-42 所 示 。 


stsong></ div> 


图 13-42 新 闻 正 文 板块 的 结构 代码 
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@ 切换 到 sub_list. css 文档 中 编写 对 应 的 规则 ,如 图 13-43 和 图 13-44 所 示 。 保 存 当 
前 文档 ,通过 浏览 器 预览 即 可 看 到 效果 。 


box sylj rw a ( 
height:26px; 
line-height: 26px; 
font-size: 14px; 
color: #082a4d; 


font-weight:bold; hd tuk tw 
line-height: 18px; 
box_tug_tw ( height: 16px; 
border: Spx solid #d9d9d9; 
height:700px; hd_tug_tw .1 


a 
width: 375px; 


padding: 8px; hd_tuk_tw em 
font-weight:bold; 
box_tuK_tw hl ( color:#cb1134; 
height: 42px; ) 
line-height: 42px; hd_tuF_tw a 
font-size:18px; padding: 0 1px; 
font-weight:bold; } 
text-align:center #content p 
color:#082a4c; margin-top: 10px; 
图 13-43 新闻 正 文 板块 系列 规则 (1) 13-44 新 闻 正 文 板块 系列 规则 (2) 


至 此 ,新闻 网 站 中 三 类 典型 页 面 的 主要 板块 布局 已 经 向 读者 介绍 完了 ,读者 在 练习 制 
作 过 程 中 应 该 着 重 体会 网 站 规划 布局 的 整体 思路 ,巩固 从 大 到 小 编写 CSS 规则 的 习惯 ， 
灵活 运用 类 规则 的 特性 节省 代码 编写 量 。 


133 实 illl 


1. 实 训 要 求 


实 训 以 小 组 形式 进行 ,每 组 3 一 4 名 同学 ,以 某 领域 的 新 闻 类 网 站 为 虚拟 题材 ,设计 并 
制作 包含 主页 .二 级 页 面 和 三 级 页 面 在 内 的 静态 网 页 。 


2. 过 程 指导 


站 点 规划 ,搜集 资料 。 确 定 网 站 主题 内 容 , 规 划 站 点 结构 ,从 网 上 搜索 相关 资料 
(图 片 .文字 等 ) 。 

© 进行 主页 设计 。 构 思 主 页 布局 ,进行 主页 标题 图 片 的 设计 ,进行 主页 其 余 图 片 的 
设计 和 页 面 内 容 的 录入 ,最 后 进行 主页 的 整体 优化 设计 。 

© 网 页 设计 。 除 主页 以 外 的 网 页 设计 ,首先 设计 网 页 模板 ,一 部 分 网 页 由 模板 生成 ， 
一 部 分 为 单独 设计 (依据 实际 需要 确定 哪些 网 页 由 模板 生成 ,确定 哪些 网 页 单独 设计 )。 
包括 版 面 设计 和 图 形 设计 、 内 容 录 入 等 。 

D 网 站 测试 。 在 浏览 器 中 对 完成 的 网 站 逐 页 打开 测试 ,包括 链接 正确 与 否 ,页 面 打 
开 时 间 ,图 片 和 动画 是 否 丢失 等 。 
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134 习 题 


1. 对 于 大 型 网 站 来 说 ,页 面 本 身 所 链接 的 外 部 CSS 文档 有 多 个 ,这 是 为 什么 ? 

2. 在 编写 CSS 规则 时 , 谈 谈 如 何 提 高 代码 编写 能 力 ? 有 何 经 验 ? 

3. 网 站 主页 上 经 常 出 现 图 像 被 一 系列 超 链接 所 包 庄 的 布局 ,对 于 这 种 布局 借助 哪些 
元 素 可 以 实现 呢 ? 
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